Bummer! You must be logged in to access this page.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by eslam said
eslam said
Courses Plus Student 6,734 Points

mouse wheel horizontal scrolling

I have a div as a container and inside it a couple of images, holding and drag left and right is working fine but mouse wheel scrolling is not working, how do i allow mouse wheel to scroll ?

here is my code

const projectList = document.querySelector('.projects-list');
let isDown = false;
let startX;
let scrollLeft;

projectList.addEventListener('mousedown', (e)=>{
    isDown = true;
    projectList.classList.add('active');
    startX = e.pageX - projectList.offsetLeft;
    scrollLeft = projectList.scrollLeft;
    projectList.classList.add('active');
});

projectList.addEventListener('mouseleave', ()=>{
    isDown = false;
    projectList.classList.remove('active');
});

projectList.addEventListener('mouseup', ()=>{
    isDown = false;
    projectList.classList.remove('active');
});

projectList.addEventListener('mousemove', (e)=>{
    if ( !isDown ) return; // stop the function from running
    e.preventDefault();
    const x = e.pageX - projectList.offsetLeft;
    const walk = x - startX;
    projectList.scrollLeft = scrollLeft - walk;
});

2 Answers

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

You didn't show your HTML or CSS, but assuming the container is smaller than the images, and the overflow property is set to scroll, the mouse wheel should scroll both vertically and horizontally without any special JavaScript code. It's a function of the browser itself.

Also, I wasn't able to hold-and-drag, but I could click and release and then horizontally scroll with just mouse movement! But I was able to fix it by adding "e.preventDefault()" to the 'mousedown' handler.

eslam said
PLUS
eslam said
Courses Plus Student 6,734 Points
eslam said
eslam said
Courses Plus Student 6,734 Points

prepventdefault on mousedown worked perfect thank you, i was able somehow to fix the scrolling however the scrolling is not smooth which is default for sure, is there is any way to make the mouse wheel scrolling looks smooth ?

i made the mouse wheel scrolling using jquery mousewheel plugin here is the code

        <!-- jquery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <!-- mousewheel -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

        $(function() {
        $(".projects-list").mousewheel(function(event, delta) {
           this.scrollLeft -= (delta * 50);
           this.scrollRight -= (delta * 50);
           this.style.transition = '1s';
           event.preventDefault();
        });
     });

here is html by the way

<div class="projects-list">
                <article class="after-august fade-in">
                    <h1>After August</h1>
                    <figure>
                        <a href="">
                            <img src="assets/media/images/slides/after-august.jpg" alt="">
                        </a>
                    </figure>
                </article>
                <article class="paperland fade-in">
                    <h1>Paperland</h1>
                    <figure>
                        <a href="">
                            <img src="assets/media/images/slides/paperland.jpg" alt="">
                        </a>
                    </figure>
                </article>
                <article class="contessa fade-in">
                    <h1>Contessa</h1>
                    <figure>
                        <a href="">
                            <img src="assets/media/images/slides/contessa.jpg" alt="">
                        </a>
                    </figure>
                </article>
                <article class="myself-and-i fade-in">
                    <h1>Myself and I</h1>
                    <figure>
                        <a href="">
                            <img src="assets/media/images/slides/myself-and-i.jpg" alt="">
                        </a>
                    </figure>
                </article>
                <article class="old-and-blue fade-in">
                    <h1>Old and blue</h1>
                    <figure>
                        <a href="">
                            <img src="assets/media/images/slides/old-and-blue.jpg" alt="">
                        </a>
                    </figure>
                </article>
                <article class="sacred-bloom fade-in">
                    <h1>Sacred Bloom</h1>
                    <figure>
                        <a href="">
                            <img src="assets/media/images/slides/sacred-bloom.jpg" alt="">
                        </a>
                    </figure>
                </article>
                <article class="dansk-magazine fade-in">
                    <h1>Danssk Magazine</h1>
                    <figure>
                        <a href="">
                            <img src="assets/media/images/slides/dansk-magazine.jpg" alt="">
                        </a>
                    </figure>
                </article>
                <article class="waterflower-camp fade-in">
                    <h1>Wildflower Camp</h1>
                    <figure>
                        <a href="">
                            <img src="assets/media/images/slides/wildflower-camp.jpg" alt="">
                        </a>
                    </figure>
                </article>
            </div>
        </main>