我无法理解它。
该元素存在于多个可滚动 DIV 元素的嵌套层次结构中，而不是存在于单个可滚动文档窗口中。
我头疼的问题之一是如何scrolled.offsetParent is document.body（颜色papayawhip在下面的测试代码中）而不是scrollable（颜色pink).
基于 JQuery 和其他库的此问题的解决方案只能作为补充而被接受 - 为了其他用户的利益，而不是我的利益。
测试代码
（原地点：JSFiddle https://jsfiddle.net/262amaxL/5/.)
function ReportExpression(ExpressionString) {
return ExpressionString + " == " + eval(ExpressionString) + "\n";
}
function ButtonClick() {
var scrollable = document.querySelector('#scrollable');
var scrolled = document.querySelector('#scrolled');
alert(
ReportExpression("scrollable.scrollTop") +
ReportExpression("scrolled.offsetTop") +
ReportExpression("(scrolled.offsetParent == document.body)")
);
scrollable.scrollTop = scrolled.offsetTop;
}
html {background-color: white;}
body {text-align: center; background-color: papayawhip;}
#page {display: inline-block; text-align: left; width: 500px; height: 500px;
overflow: auto; background-color: powderblue; padding: 10px;}
#scrollable {height: 500px; overflow: auto; background-color: pink;}
<body>
<div id="page">
<button onClick="ButtonClick();">Scroll</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="scrollable">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<text id="scrolled">I want to scroll all scrollbars to this element.</text>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
我研究过的文章
- 如何使用 JavaScript 滚动到某个元素？ https://stackoverflow.com/questions/5007530/how-do-i-scroll-to-an-element-using-javascript
- http://www.quirksmode.org/js/findpos.html http://www.quirksmode.org/js/findpos.html
- 如何滚动到div内的元素？ https://stackoverflow.com/questions/635706/how-to-scroll-to-an-element-inside-a-div
怎么样this https://jsfiddle.net/Arg0n/804gtjp5/?:
function ButtonClick() {
var page = document.querySelector('#page');
var scrollable = document.querySelector('#scrollable');
var scrolled = document.querySelector('#scrolled');
page.scrollTop = scrollable.offsetTop-page.offsetTop;
scrollable.scrollTop = scrolled.offsetTop-scrollable.offsetTop;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
