0

此问题发生在 Safari 中。滚动经过 iframe 元素时，滚动捕捉似乎中断。具体就我而言，当光标悬停在嵌入的 youtube iframe 上时会发生这种情况（当光标位于同一父 div 内但不在 iframe 上时工作正常）。

问题： 而不是平滑地捕捉到下一个滚动捕捉对齐，它似乎拍摄或加速到最后一个捕捉对齐或页面底部。

在同样的情况下，chrome似乎没有出现这个问题。

.container {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  -webkit-scroll-snap-type: y mandatory;
}

.section {
  height: 100vh;
  scroll-snap-align: start;
}
<div class="container">
  <div class="section">
    <div class="first-thing">
      ...
    </div>
  </div>
  <div class="section">
    <div class="video-wrapper">
      <iframe class="video-source" src="https://www.youtube.com/embed/example" title="YouTube video player" frameborder="0"></iframe>
    </div>
  </div>
  <div class="section">
    <div class="other-things">
      ...
    </div>
  </div>
  <div class="section">
    <div class="more-things">
      ...
    </div>
  </div>
  <div class="section">
    <div class="last-thing">
      ...
    </div>
  </div>
</div>

有没有其他人遇到过这个问题或有解决方案？谢谢。

我想我现在只禁用滚动捕捉。

4

0 回答 0