javascript - 如何强制(默认)滚动条随着缓动而移动(特别是在 chrome 中)

Question

我想要实现的是，我想强制默认滚动条通过缓动动画上下移动。类似于 this plugin。

或者一些非常接近新 firefox 滚动条的东西(它可以轻松滚动，而不是像 chrome 或 windows 的默认设置那样突然滚动)

我尝试了很多东西，但没有一个是完美的。例如，我想从 this tutorial 中获得灵感，但是一旦我将 overflow 属性更改为 auto，(给容器一个滚动条)，一切都会变得疯狂!(你可以自己试试看我的意思是)。我什至尝试了下面的代码，但话又说回来，它有自己的问题:

HTML:

<div class="container">
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
</div>

CSS:

.container {
    width: 300px;
    height: 700px;
    background-color: red;
    overflow: scroll;
}

.test {
    width: 200px;
    height: 300px;
    background-color: blue;
    margin: 5px 0 5px 0;
    border-radius: 10px;
}

JavaScript:

$(document).ready(function () {
        $('.container').mousewheel(function (e) {
            var cp = $(this).scrollTop();
            var deltaY = e.deltaY;
            var deltaFactor = e.deltaFactor;
            var sd = cp + (deltaFactor * (-deltaY));
            $(this).stop().animate({ scrollTop: sd });
        });
});

正如我所说，我不想使用外部插件(比如 niceScroll 或 costume-scrollbar-pugin)。要强调的是，我希望滚动条的行为类似于 firefox 的滚动条

Answer 1

你有没有考虑过像this?这样的东西(虽然不确定这是否正是您要找的...)

Here是使用脚本的演示

编辑

已删除，因为它不再使用且充满错误