从父级到子级滚动时Firefox延迟_Firefox_Scroll_Delay

从父级到子级滚动时Firefox延迟

firefox scroll

从父级到子级滚动时Firefox延迟,firefox,scroll,delay,Firefox,Scroll,Delay,仅在firefox中，我注意到当父元素和子元素都有overflow:scroll时，在第二个元素注册它应该继续滚动之前，从一个元素滚动到另一个元素时会有几秒钟的延迟您可以在此处看到一个示例：正文{ 溢出：滚动；高度：300px；背景：蓝色； } .外部{ 利润上限：200px；高度：300px；溢出：滚动；背景：红色； } .内部{ 高度：500px；位置：相对位置； } .底部{ 位置：绝对位置；底部：0；左：0； } 内顶内底将光标直接放在红色div上方并向下滚动

仅在firefox中，我注意到当父元素和子元素都有overflow:scroll时，在第二个元素注册它应该继续滚动之前，从一个元素滚动到另一个元素时会有几秒钟的延迟

您可以在此处看到一个示例：

正文{
溢出：滚动；
高度：300px；
背景：蓝色；
}
.外部{
利润上限：200px；
高度：300px；
溢出：滚动；
背景：红色；
}
.内部{
高度：500px；
位置：相对位置；
}
.底部{
位置：绝对位置；
底部：0；
左：0；
}
内顶
内底

将光标直接放在红色div上方并向下滚动。页面正文将首先滚动并到达页面底部。然后有几秒钟的延迟，之后内部div将滚动，直到您看到该div底部的文本。向上滚动时的结果类似

有什么已知的解决方案吗

body {
  overflow: scroll;
  height: 300px;
  background: blue;
}

.outer {
  margin-top: 200px;
  height: 300px;
  overflow: scroll;
  background: red;
}

.inner {
  height: 500px;
  position: relative;
}

.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
}

<body>
  <div class="outer">
    <div class="inner">
      Inner Top
      <div class="bottom">
        Inner bottom
      </div>
    </div>
  </div>
</body>