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? — Liam
– Liam, Commented Mar 20, 2014 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
– Huangism, Commented Mar 20, 2014 at 13:37
@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: jsfiddle.net/LL782/ZtGva/1 — Laurence Lord
– Laurence Lord, Commented Mar 20, 2014 at 14:25
@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
– Laurence Lord, Commented Mar 20, 2014 at 14:47

Huangism · Accepted Answer · 2014-03-20 15:30:35Z

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, 2014 at 15:30

answered Mar 20, 2014 at 15:13

Huangism

16.5k7 gold badges51 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Laurence Lord Over a year ago

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?

Huangism Over a year ago

I just googled and found out about the scrolling on stackoverflow

Kyle Bachan Over a year ago

This is great! How would you modify it for tablet/smartphone devices? So instead of mouse wheel listeners, there would be touch scroll listeners?

Huangism Over a year ago

@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 api.jquery.com/scroll bind scroll to window and you can do stuff as the page is scrolled

Kyle Bachan Over a year ago

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; });

|

Collectives™ on Stack Overflow

How to make an element scroll when scrolling body

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related