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

event mousescroll不再受支持。或检查文档https://developer.mozilla.org/en-US/docs/Web/API/Element/mousewheel_event

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

1 个答案: