滚动正文时如何使元素滚动

Question

当鼠标滚轮在页面主体上滚动时，可以捕获此事件。我希望这个事件触发目标元素滚动。

#target 是一个可滚动的元素，它永远不会是页面的高度。我想在页面上的任何位置捕获 mousescroll 事件，因此即使光标不在元素上方，元素仍会滚动。

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

感谢这篇文章向我展示了如何捕获滚轮事件：Capturing Scroll Wheel Events

Answer 1

你可以看看这个。

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

注意我添加了一个 div 用于高度计算

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

您可以通过缓存一些 jquery 变量来稍微清理一下这段代码，但想法就在那里