JavaScript的scrollIntoView（）中间alignment？

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

1. 最佳
2. 底部

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

Answer 1

使用window.scrollTo()为此。 获取要移动的元素的顶部，并减去窗口高度的一半。

演示： http : //jsfiddle.net/ThinkingStiff/MJ69d/

 Element.prototype.documentOffsetTop = function () { return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop() : 0 ); }; var top = document.getElementById( 'middle' ).documentOffsetTop() - ( window.innerHeight / 2 ); window.scrollTo( 0, top ); 

Answer 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/

Answer 3

用JQuery我使用这个：

 function scrollToMiddle(id) { var elem_position = $(id).offset().top; var window_height = $(window).height(); var y = elem_position - window_height/2; window.scrollTo(0,y); } 

例：

 <div id="elemento1">Contenido</div> <script> scrollToMiddle("#elemento1"); </script> 

Answer 4

您可以分两步进行：

 myElement.scrollIntoView(true); var viewportH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); window.scrollBy(0, -viewportH/2); // Adjust scrolling with a negative value here 

你可以添加元素的高度，如果你想以globaly为中心，而不是居中顶部：

 myElement.scrollIntoView(true); var viewportH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); window.scrollBy(0, (myElement.getBoundingClientRect().height-viewportH)/2);