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变量来清理这段代码，但想法是

滚动体时如何使元素滚动

1 个答案: