慣性垂直拖動滾動

我已經通過用滑鼠向上/向下拖動來在我的網頁上進行垂直滾動。但是，問題在于它感覺非常突然，因為當您停止拖動時滾動會立即停止。我想添加一些慣性，以便在您停止拖動后它會繼續滾動一段時間，直到它停止。

這實作起來有點復雜，所以我需要一些幫助。這是我當前的所有代碼：

let newScrollY = 0
let element = null

const dragScroll = (enabled) => {
        element?.removeEventListener("mousedown", element?.mouseDownFunc, false)
        window.removeEventListener("mouseup", element?.mouseUpFunc, false)
        window.removeEventListener("mousemove", element?.mouseMoveFunc, false)

        element = document.querySelector(".drag")
        if (!element || !enabled) return
        let lastClientY = 0
        let mouseDown = false

        element.addEventListener("mousedown", element.mouseDownFunc = (event) => {
                event.preventDefault()
                mouseDown = true
                lastClientY = event.clientY
        }, false)

        window.addEventListener("mouseup", element.mouseUpFunc = (event) => {
            mouseDown = false
        }, false)

        window.addEventListener("mousemove", element.mouseMoveFunc = (event) => {
            if (!mouseDown) return
            let scrollElement = element
            if (element == document.body) scrollElement = document.documentElement
            newScrollY = event.clientY - lastClientY
            lastClientY = event.clientY
            scrollElement.scrollTop -= newScrollY
        }, false)
}

uj5u.com熱心網友回復：

我想出了一個解決辦法。關鍵是使用速度的絕對值，并根據速度的符號（指示它們是向上滾動還是向下滾動）對 scrollTop 進行加/減。

let newScrollY = 0
let lastScrollTop = 0
let element = null as any
let inertia = false
let mouseDown = false

const dragScroll = (enabled) => {
        if (inertia || mouseDown) return
        element?.removeEventListener("mousedown", element?.mouseDownFunc, false)
        window.removeEventListener("mouseup", element?.mouseUpFunc, false)
        window.removeEventListener("mousemove", element?.mouseMoveFunc, false)

        element = document.querySelector(".drag")
        if (!element || !enabled) return
        let lastClientY = 0
        mouseDown = false
        let time = null
        let id = 0

        element.addEventListener("mousedown", element.mouseDownFunc = (event) => {
                event.preventDefault()
                mouseDown = true
                inertia = false
                time = new Date()
                lastClientY = event.clientY
                let scrollElement = element
                if (element == document.body) scrollElement = document.documentElement
                lastScrollTop = scrollElement.scrollTop
                cancelAnimationFrame(id)
        }, false)

        window.addEventListener("mouseup", element.mouseUpFunc = (event) => {
            mouseDown = false
            const timeDiff = (new Date() as any - time)
            let scrollElement = element
            if (element == document.body) scrollElement = document.documentElement
            let speedY = (scrollElement.scrollTop - lastScrollTop) / timeDiff * 20
            let speedYAbsolute = Math.abs(speedY)

            const draw = () => {
                let scrollElement = element
                if (element == document.body) scrollElement = document.documentElement
                if (speedYAbsolute > 0) {
                    if (speedY > 0) {
                        scrollElement.scrollTop  = speedYAbsolute--
                    } else {
                        scrollElement.scrollTop -= speedYAbsolute--
                    }
                } else {
                    inertia = false
                }
                id = requestAnimationFrame(draw)
            }
            inertia = true
            draw()
        }, false)

        window.addEventListener("mousemove", element.mouseMoveFunc = (event) => {
            if (!mouseDown) return
            let scrollElement = element
            if (element == document.body) scrollElement = document.documentElement
            newScrollY = event.clientY - lastClientY
            lastClientY = event.clientY
            scrollElement.scrollTop -= newScrollY
        }, false)
    }

標籤：javascript 网络 滚动 拖 垂直滚动

上一篇：在WP中編輯索引檔案

下一篇：有沒有可以使用Flask顯示沒有HTML標簽的SVG的解決方案？[復制]