javascript - 在溢出 : auto 的 div 中仅滚动一次 'var distance'

Question

所以我遇到了滚动问题。

使用:jquery.mousewheel.min.js

有一个 div 带有 overflow: auto 并且它有固定的宽度或高度 600px。

$(document).ready(function() {
    if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
    window.onmousewheel = document.onmousewheel = wheel;

    function wheel(event) {
        var delta = 0;
        if (event.wheelDelta) delta = event.wheelDelta / 120;
        else if (event.detail) delta = -event.detail / 3;

        handle(delta);
        if (event.preventDefault) event.preventDefault();
        event.returnValue = false;
    }

    function handle(delta) {
        var time = 200;
        var distance = 300;
        $('#blablabla').stop().animate({
            scrollLeft: $(window).scrollLeft() - (distance * delta)
        }, time);

        $('#lolololol').stop().animate({
            scrollTop: $(window).scrollTop() - (distance * delta)
        }, time);
    }           
});

问题: div 中的内容仅向左或向右/向上或向下滚动 300px 一次，仅此而已。 没有这个脚本，overflow: auto 工作正常。需要让它与它一起工作。

Answer 1

问题是您正在为 div 的滚动设置动画，但是使用窗口的滚 Action 为动画的参数值。使用 div 自己的滚动值。

例如，改变这个:

    $('#lolololol').stop().animate({
        scrollTop: $(window).scrollTop() - (distance * delta)
    }, time);

为此:

    $('#lolololol').stop().animate({
        scrollTop: $('#lolololol').scrollTop() - (distance * delta)
    }, time);

我创建了一个模拟您情况的 fiddle :http://jsfiddle.net/9dNGL/2/