javascript - 如何让滚动窗口影响滚动的div内容？

Question

如何使 Windows 中的滚动影响 div 内容(例如 WordPress 编辑器页面)中的滚动。

例如我有一个元素:

1. 标题
2. 文章
3. 页脚

我的 div 内容有样式:

.my-div {
   overflow-y: auto;
   height: 576px;
}

在my-div里面，有一篇1000字长的文章，也就是说那里有一个卷轴。

当我向下滚动时，通过标题并到达文章后，滚动将对我在文章中的div内容滚动产生影响部分。

<article>
    <div class="my-div">
        <!-- my content here -->
    </div>
</article>

所以当我将窗口滚动条下拉到底部时，我的 div 滚动条将被下拉。

直到我的“div”滚动完成，我下拉的滚动窗口会自动将我带到footer部分。

我一直在寻找这个问题的解决方案，但我没有找到。

提前谢谢你。

由 Google 翻译

Answer 1

此 JS 使 ID 为 YOUR_ELEMENT 的元素随窗口滚动而滚动。

const lastScrollTop = window.addEventListener("scroll", function() {
   const st = window.pageYOffset || document.documentElement.scrollTop;
   if (st > lastScrollTop){
     document.getElementById('YOUR_ELEMENT').scrollTop++;
   } else {
      document.getElementById('YOUR_ELEMENT').scrollTop--
   }
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);