How to make an element scroll when scrolling body

Question

When the mousewheel is scrolled on the body of a page this event can be captured. I'd like this event to trigger a target element to scroll.

#target is a scrollable element that is never the height of the page. I'd like to capture the mousescroll event anywhere on the page so even if the cursor is not over the element the element still scrolls.

$( 'body' ).on( 'DOMMouseScroll mousewheel', function () {
    // Scroll #target instead of body    
});

Thanks to this post for showing me how to capture scroll wheel events: Capturing Scroll Wheel Events

possible duplicate of [How to scroll within an overflow hidden div to a certain currently invisible element?](http://stackoverflow.com/questions/11301841/how-to-scroll-within-an-overflow-hidden-div-to-a-certain-currently-invisible-ele) — Liam, Mar 20 '14 at 13:28
Or maybe [How to scroll to an element inside a div?](http://stackoverflow.com/questions/635706/how-to-scroll-to-an-element-inside-a-div) — Liam, Mar 20 '14 at 13:28
This is a horrible idea. I want to scroll the page with my mousewheel, and you are preventing me from doing that. — Huangism, Mar 20 '14 at 13:37
Thanks @Liam . I think it's different to the others because I want the scrolling to happen as the user scrolls the mouse wheel. Rather than scrolling to a specific element as in those others. — Laurence Lord, Mar 20 '14 at 14:24
@Huangism . No no I don't want to stop the user from using the mousewheel. I want to let them use their mousewheel whether they are over the target element or over any part of the page. Here's a fiddle: http://jsfiddle.net/LL782/ZtGva/1/ — Laurence Lord, Mar 20 '14 at 14:25
@LaurenceLord my point was I want to scroll the page using my wheel and not scroll a particular element when I am hovering over the page. You are basically blocking the user to scroll the page using the mousewheel — Huangism, Mar 20 '14 at 14:27
@Huangism I take your point but on the particular page there is nothing else to scroll. The only element on the page that needs to scroll is #target. — Laurence Lord, Mar 20 '14 at 14:47
@LaurenceLord I posted an answer, in the fiddle everything works, I only tested in FF on mac. You can increase the scroll speed if you set the +/- to more than 5 — Huangism, Mar 20 '14 at 15:27

Huangism · Accepted Answer · 2014-03-20T15:30:35.440

4

You can have a look at this.

http://jsfiddle.net/ZtGva/7/

JS

$(function () {
    var myCounter = 0,
        myOtherCounter = 0;
    var scroll = 0;

    $("#target").scroll(function () {
        myCounter = myCounter + 1;
        $("#log").html("<div>Handler for .scroll() called " + myCounter + " times.</div>");
    });

    //Firefox
    // $(document).bind(...) this works as well
    $('#body').bind('DOMMouseScroll', function (e) {
        if (e.originalEvent.detail > 0) {
            scrollDown();
        } else {
            scrollUp();
        }

        //prevent page fom scrolling
        return false;
    });

    //IE, Opera, Safari
    $('#body').bind('mousewheel', function (e) {
        if (e.originalEvent.wheelDelta < 0) {
            scrollDown();
        } else {
            scrollUp();
        }
        //prevent page fom scrolling
        return false;
    });

    function scrollDown() {
        //scroll down
        console.log('Down ' + scroll);
        if (scroll < $('#target').find('div').height() - $('#target').height() + 20) {
            scroll = $('#target').scrollTop() + 5;
            $('#target').scrollTop(scroll);
        }
    };

    function scrollUp() {
        //scroll up
        console.log('Up ' + scroll);
        if (scroll > 0) {
            scroll = $('#target').scrollTop() - 5;
            $('#target').scrollTop(scroll);
        }
    };
});

Note I added a div for height calculation

<div id="target"><div>.... </div></div>

You can clean up this code a bit by caching some jquery variables but the idea is there

edited Mar 20 '14 at 15:30

answered Mar 20 '14 at 15:13

Huangism

16,278
7
48
74

This is great. I would never have known to test e.originalEvent.detail and would have had even less chance of discovering e.originalEvent.wheelDelta. It's easy when you know how but when you don't is there a particular place to go to find out? Particular books or online references, or does one learn simply by asking questions on forums? – Laurence Lord Mar 20 '14 at 23:12
I just googled and found out about the scrolling on stackoverflow – Huangism Mar 21 '14 at 13:44
This is great! How would you modify it for tablet/smartphone devices? So instead of mouse wheel listeners, there would be touch scroll listeners? – Kyle Bachan Jun 09 '14 at 23:29
@Kyle for touch devices you can just bind scroll using jquery, the tricky part about this question was the mousewheel. Detecting normal scroll is easy http://api.jquery.com/scroll/ bind scroll to window and you can do stuff as the page is scrolled – Huangism Jun 10 '14 at 12:10
What would the method look like? I've attempted binding scroll instead of mousewheel but my page remains static. I suppose I'm unsure of what method to call from e. I created an alternate method from searching stackoverflow but the page remains the same (the mousewheel's the only thing that works for me). var lastScrollTop = 0; jQuery(window).bind('scroll', function (e) { var st = jQuery(window).scrollTop(); if (st > lastScrollTop){ scrollDown(); } else { scrollUp(); } lastScrollTop = st; return false; }); – Kyle Bachan Jun 10 '14 at 15:01
Here's my question: http://stackoverflow.com/questions/24145169/how-to-trigger-scroll-of-container-by-scrolling-outside-of-said-container – Kyle Bachan Jun 10 '14 at 17:46

How to make an element scroll when scrolling body

1 Answers1