horizontal scrolling on mouse wheel on div element

Question

I try to create an horizontal scrolling on div element when user uses mouse wheel.

Here is a screenshot :

enter image description here

Here is the code of my div :

<div id="contact_list">
            <ul>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
                <li>
                    <img src="/img/img_example.jpg" class="img_contact_area" />
                    <div class="contact_presence"></div>
                </li>
        </div>

I use mouse wheel plugin as following in my JS :

$("#contact_list").mousewheel(function(event, delta, deltaX, deltaY) {
    var o = '';
    if (deltaY > 0){
                      $("#contact_list").animate({scrollRight : '-=200'}, 'slow');
                              }
    else if (deltaY < 0){
                              $("#contact_list").animate({scrollRight :'+=200'}, 'slow');
                 }

});

But there is no effect, the scroll is well detected because i go the JS code, but delta is always equal to -1..

Is there a problem in my code or any other solution to make an horizontal scroll on my elements ?

Here is CSS :

#contact_list ul {
    list-style-type: none;
    white-space:nowrap;
    overflow-x:auto;
}

#contact_list ul li {
    display:inline;
}

What do you get in `delta` and `deltaX`? – Aaron Digulla Feb 18 '15 at 13:29 — Aaron Digulla, Feb 18 '15 at 13:29
@AaronDigulla delta = 1, deltaX = -0 – wawanopoulos Feb 18 '15 at 13:46 — wawanopoulos, Feb 18 '15 at 13:46

score 0 · Answer 1 · edited May 23 '17 at 12:06

If contact_list has only a horizontal scrollbar, then the mouse wheel will use it. My guess is that you apply a style to the element which prevents it from displaying scrollbars at all, which is why the wheel doesn't work. As a starter, allow the browser to render a scrollbar to see whether it works then.

Things become confusing if a parent container has a scrollbar, so try to avoid that.

[EDIT] You should also look at this answer: https://stackoverflow.com/a/22518932/34088 how to bind to the raw event and find out the delta. Note that this code is heavily browser dependent.

I think the main problem is if the DOM node has no scrollbar: If there is none, then the browser can't scroll it, so the mousewheel event will always report "I moved the element by 0 pixels".enter code here

https://github.com/jquery/jquery-mousewheel/

That's odd; `overflow-x:auto;` should give you a horizontal scrollbar when the content is too wide. — Aaron Digulla, Feb 18 '15 at 13:49

horizontal scrolling on mouse wheel on div element

1 Answers1