javascript - 如何使用 JavaScript 在浏览器中大致居中突出显示的元素？类似于 鸭鸭

Question

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

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

jQuery 或 Vanilla JS 都可以。

注意：该脚本现在可在此处安装，并且在 metacpan 搜索的上下文中可读且有用，例如https://metacpan.org/search?q=config。请参阅https://userscripts-mirror.org/。

Answer 1

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

elt 顶部位置 - elt 高度/2 - 容器高度/2

关于您的脚本，请尝试替换：

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

经过：

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