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

Question

I implemented this user script (open source under MIT/expat) to enable up/down arrows iteration (using the keyboard arrow keys) like this page - https://duckduckgo.com/?q=javascript&ia=web (try pressing the down arrow key there several times and then up arrow - js has to be whitelisted).

However, the viewport is always positioned the top-left of the highlighted/selected/active element. What is the easiest way to make it more like DDG where the active item does not always scroll the page and is roughly at the centre?

Both jQuery or Vanilla JS are OK.

Note: the script is available for installation here for now and is readable and useful in the context of metacpan searches such as https://metacpan.org/search?q=config . See https://userscripts-mirror.org/ .

Answer 1

Sample of calculation for a vertical-centered position:

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

Regarding your script, try to replace:

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

By:

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