javascript - 如何使用 JavaScript 在浏览器中粗略地居中突出显示的元素？类似于 duckduckgo

Question

我实现了 this user script (在 MIT/expat 下开源)启用向上/向下箭头迭代(使用键盘箭头键)，就像这个页面 - https://duckduckgo.com/?q=javascript&ia=web (尝试多次按向下箭头键，然后按向上箭头键 - js 必须列入白名单)。

但是，视口(viewport)始终位于突出显示/选定/事件元素的左上角。使其更像 DDG 的最简单方法是什么，其中事件项目并不总是滚动页面并且大致位于中心？

jQuery 或 Vanilla JS 都可以。

注意:脚本可供安装here现在，在 metacpan 搜索的上下文中可读且有用，例如 https://metacpan.org/search?q=config .参见 https://userscripts-mirror.org/ .

Answer 1

垂直居中位置的计算示例:

elt top position - elt height/2 - container height/2

关于你的脚本，尝试替换:

window.scrollTo( el.offset().left , el.offset().top );

通过:

window.scrollTo( el.offset().left , el.offset().top - el.innerHeight()/2 - window.innerHeight/2 );