滚动所有嵌套的滚动条以显示HTML元素

7vujy0f0hy 发表于 Dev

7vujy0f0hy

我不能把头缠住它。

该元素存在于多个可滚动DIV元素的嵌套层次结构中，而不是存在于单个可滚动文档窗口中。

我的一个头痛的是如何scrolled.offsetParent为document.body（颜色papayawhip在下面的测试代码），而不是scrollable（彩色pink）。

基于JQuery和其他库的此问题的解决方案仅作为补充，可以接受–为其他用户而不是我的利益。

测试码

（原始位置：JSFiddle。）

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>

我研究过的文章

精氨酸0n

怎么样这个？

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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。