在Div中更改innerHtml时，ScrollTop和ScrollTo不工作

ScrollTop and ScrollTo Not working when changing innerHtml in a Div

本文关键字：ScrollTop ScrollTo 工作 Div innerHtml      更新时间：2023-09-26

我读了很多关于这方面的主题，但我看到的任何解决方案都无法发挥作用。我有一个Div"Section"，其中的内容（图像、文本等）通过更改p的innerhtml来更改。我不明白为什么当我在通过切换innerhtml创建的"窗格"之间切换时，无法将其滚动回#部分的顶部。换句话说，你通过点击图像/文本加载一个窗格，向下滚动并查看内容，然后当你点击另一个"窗格"时，我只希望它滚动到顶部。有什么想法吗？

这就是我目前拥有的

     case 1:
                    text = '[new html] ';
                    document.getElementById("demo").innerHTML = text;
                    document.getElementById("section").scrollTo(0,0);
                    break;

这是我加载时原始正文中的HTML-

<div id="section"><div id="sectionwrap">
<p id="demo"></p>
</div></div>

这是你想要的吗？理解你的问题有点困难，所以请耐心等待：）

window.onload = function(){
var x;
document.getElementById('aa').onclick = function() {
  document.getElementById("section").scrollTop = 0;
  document.getElementById("section").style.background = 'red';
};
};
p {
  padding: 0;
  margin: 0;
  font-family: Impact;
  line-height: 30px;
}
#sectionwrap {
  width: 100%;
  height: 1600px;
  background: rgba(255, 255, 122, .5);
}
#sidebar {
  width: 12.5%;
  height: 1000px;
}
#aa {
  background: blue;
}
#aa:hover {
  background: green;
}
#section {
  overflow-y: scroll;
  width: 100%;
  height: 200px;
  float: left;
  font-size: 2em;
  font-weight: bold;
  background: black;
  background-size: 100%;
  padding: 0%;
  text-align: center;
}
<body>
  <div id="section">
    <div id="sectionwrap">
      <p id="demo">1
        <br>
        <br>
        <br>
        <br>
        <div id="aa" onclick="z(9)">2</div>
      </p>
    </div>
  </div>
</body>

如果其他人有这个问题，我会解决的。

我有一个开关，它在#sectiondiv的innerHTML集合之间进行了切换（并切换了一些其他装饰性的东西）。如果页面中有类似的设置，请在切换之前调用ScrollTop命令。这实现了我想要的，即通过在每个开关情况下使用具有不同设置的开关来更改innerHTML，但在调用"更改内容"函数时，让包含新html的div滚动回顶部。

相关文章：