鼠标滚轮平滑滚动滚动条问题

Question

我一直在摆弄一个纯javascript的解决方案，当你使用鼠标滚轮时，可以平滑地滚动，我偶然发现了这段代码，我根据自己的需要进行了调整。除了滚动条之外，其他一切都可以正常工作。例如，如果您按住滚动条并将其向下移动，例如，当您松开滚动条并再次向下使用鼠标滚轮时，它将恢复到鼠标滚轮的前一个位置，并且方向相反。我的代码：

init()

  function init(){
        new SmoothScroll(document,120,12)
    }

    //Smooth Scroll
    function SmoothScroll(target, speed, smooth) {
        if (target === document)
            target = (document.scrollingElement 
                  || document.documentElement 
                  || document.body.parentNode 
                  || document.body) // cross browser support for document scrolling
                     
        var moving = false
        var pos = target.scrollTop
        var frame = target === document.body 
                  && document.documentElement 
                  ? document.documentElement 
                  : target // safari is the new IE

        target.addEventListener('DOMMouseScroll', scrolled, { passive: false })
        target.addEventListener('mousewheel', scrolled, { passive: false }) 

        function scrolled(e) {

            e.preventDefault(); // disable default scrolling
            var delta = normalizeWheelDelta(e)
            pos += -delta * speed
            pos = Math.max(0, Math.min(pos, target.scrollHeight - frame.clientHeight)) // limit scrolling
            if (!moving) update()
        }

        function normalizeWheelDelta(e){
          
            if(e.detail){
                if(e.wheelDelta)
                    return e.wheelDelta/e.detail/40 * (e.detail>0 ? 1 : -1) // Opera
                else
                    return -e.detail/3 // Firefox
            }else
                return (e.wheelDelta/120)  // IE,Safari,Chrome
        }
        function update() {
            moving = true
            var delta = (pos - target.scrollTop) / smooth
            target.scrollTop += delta
            if (Math.abs(delta) >= 1) requestFrame(update)
            else moving = false
        }
        var requestFrame = function() { // requestAnimationFrame cross browser
            return (
                window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(func) {
                    window.setTimeout(func, 1000 / 60);
                }
            );
        }() 
    }

我做了一个小提琴来举例说明这个问题https://jsfiddle.net/kgc85trn/

任何帮助都将不胜感激

Answer 1

不再支持事件鼠标滚动。或者查看文档的https://developer.mozilla.org/en-US/docs/Web/API/Element/mousewheel_event