Javascript 仅滚动一次'；变量距离'；在具有溢出的div中：auto

所以我有滚动的问题

使用：

jquery.mouseweel.min.js

有一个

div

，带有

溢出：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

可以正常工作。需要使用它来完成此操作。

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

例如，更改此选项：

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

为此：

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

我制作了一把小提琴来模拟你的处境：