Javascript scrollIntoView（） middle alignment？

javascript js-scrollintoview

2022-08-30 05:23:13

Javascript只提供两个对齐选项。.scrollIntoView(boolean)

返回页首
底

如果我想滚动视图，该怎么办？我想在页面中间的某个地方添加特定元素？

答案 1

试试这个：

 document.getElementById('myID').scrollIntoView({
            behavior: 'auto',
            block: 'center',
            inline: 'center'
        });

有关更多信息和选项，请参阅此处： https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

答案 2

可以使用 getBoundingClientRect（） 来获取实现此目的所需的所有信息。例如，您可以执行如下操作：

const element = document.getElementById('middle');
const elementRect = element.getBoundingClientRect();
const absoluteElementTop = elementRect.top + window.pageYOffset;
const middle = absoluteElementTop - (window.innerHeight / 2);
window.scrollTo(0, middle);

演示：http://jsfiddle.net/cxe73c22/

这个解决方案比沿着父链走，就像在公认的答案中一样，并且不涉及通过扩展原型来污染全局范围（在javascript中通常被认为是不好的做法）。

所有现代浏览器都支持该方法。getBoundingClientRect()