单击时滚动到光标答案

【问题标题】：Scroll to cursor on click单击时滚动到光标
【发布时间】：2018-07-06 02:24:55
【问题描述】：

我正在尝试使页面平滑滚动，以便单击鼠标左键后光标垂直居中。

我知道如何使用事件侦听器来捕获点击位置，但我不确定如何计算滚动偏移量以使光标正确居中而不管滚动条的大小和位置如何。

【问题讨论】：

Element.scrollTop ?来自Docs
是的，但是如何计算点击位置的偏移量以使其居中？
我不确定你在问什么。您想在用户单击时将鼠标居中在他们单击的位置和滚动条之间吗？还是想让滚动条滚动到鼠标点击的位置？
我想让滚动条滚动到鼠标点击的位置=)

标签： javascript web

【解决方案1】：

这样的东西可以工作：

ES6：document.onclick = (e) => window.scroll(0,(e.pageY-window.innerHeight/2))

ES5：document.onclick = function(e) { window.scroll(0,(e.pageY-window.innerHeight/2)) }

pageY应该代表点击在整个页面的位置。

然后我们使用window.innerHeight / 2 到达页面中间。

当谈到平滑滚动时，这样的事情可能会起作用，尽管我可能更喜欢使用一些现有的 npm 包来做到这一点。

function smoothScroll(y, existing) {
    if(!existing && smoothScroll.active) return
    smoothScroll.active = true
    var initialScrollY = window.scrollY
    var scrollDistance = y - window.scrollY
    var scrollAmount = scrollDistance/20
    window.scroll(0, window.scrollY + scrollAmount)
    if(window.scrollY === initialScrollY) {
        smoothScroll.active = false
        return
    }
    setTimeout(function() { smoothScroll(y, true) }, 1)
}

document.onclick = function(e) { 
    smoothScroll(e.pageY-window.innerHeight/2) 
}

【讨论】：

效果很好！你是救生员，谢谢！