滚动所有嵌套的滚动条，使HTML元素进入视图

Scroll all nested scrollbars to bring an HTML element into view

本文关键字：元素 HTML 视图 嵌套 滚动条 滚动      更新时间：2023-09-26

我无法理解它。

该元素存在于多个可滚动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>

我研究过的文章

  1. 如何使用JavaScript滚动到元素
  2. http://www.quirksmode.org/js/findpos.html
  3. 如何滚动到div中的元素

这个怎么样？：

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

只需将其设置为href锚并转到该锚即可。

<button onClick="document.location+='#scrolled';return false;">Scroll</button>

根据您所研究的第一个链接，我已经应用了其中的一个解决方案。

    element = document.getElementById("scrollable");
    alignWithTop = true;
    element.scrollIntoView(alignWithTop);
    elementB = document.getElementById("scrolled");
    alignWithTopB = true;
    elementB.scrollIntoView(alignWithTopB);

现场演示：https://jsfiddle.net/yt22fwc0/

相关文章：