如何使用JavaScript大致将浏览器中突出显示的元素居中？与duckduckgo相似

Question

我实现了this user script（MIT / expat下的开源）以启用向上/向下箭头迭代（使用键盘箭头键），如此页面 - https://duckduckgo.com/?q=javascript&ia=web（尝试按下向下箭头键几次然后向上箭头 - js必须列入白名单）。

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

jQuery或Vanilla JS都可以。

注意：该脚本现在可用于安装here，并且在元搜索（例如https://metacpan.org/search?q=config）的上下文中可读且有用。见https://userscripts-mirror.org/。

Answer 1

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

elt top position - elt height / 2 - 容器高度/ 2

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

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

通过：

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