logo标签列表

Safari / Webkit CSS 滚动捕捉 bug？

cssscrollsafaricross-browserwebkit
4

在 Safari（桌面版和 iOS 版）上似乎无法正确使用滚动捕捉。

如果一个项目的内容高度超过视口，则出现了错误（？），在这种情况下，Safari 会立即快速滚动到下一个项目，使得无法阅读具有长文本的项目内容。但在 Chrome、Firefox 或 Opera 中不会出现这种情况，在任何长捕捉部分中都可以滚动，只有在该长项目底部时才会捕捉到下一个项目的开头（从而可以被阅读）。

这是一个演示：https://codepen.io/xfze/pen/YzWXdQv

相关代码如下：

ul {
    max-height: 100vh;
    overflow: scroll;
    scroll-snap-type: y mandatory;
}
li {
    scroll-snap-align: start;
}

有人绕过了这个问题，让Safari表现得像Chrome/Firefox/Opera吗？
也许你可以尝试在Safari中使用接近性(proximity)而不是强制性(mandatory)。规范提到了这个可能的问题w3 spec。 - Ale Plo
我尝试过，但与“正常强制”相比，它相当繁琐，我发现它比“冻结滚动”长节更糟糕。 - xfze
这可能有点不太稳定，但也许你可以在用户滚动到某个特定点时向 div 添加滚动捕捉。这不能用纯 CSS 完成，也不是太优雅，但也许会有所帮助？ - Ale Plo
我有一个 CSS 修复（不是很好，但现在可以用）：当在 Safari 上时，我将长节的 snap-align 设置为居中。 - xfze
2个回答
3
实际上，Safari 做得很正确，而其他浏览器则只是制造了一种“接近性”的效果。
所以，即使我理解你不喜欢“接近性”，但你期望的“强制性”方式并没有意义，让我解释一下。
当你设置 scroll-snap-align: start; 时，mandatory 尝试将视图始终固定在 child 的 start 处，这意味着子元素的高度必须为 max-height: 100vh; 才能产生正确的效果。
因为如果你不这样做，用户将永远无法阅读 li 的底部，尝试使用你的演示，你会发现，当它进入屏幕时，它会直接跳到下一个 li。
所以根据你的愿望，我建议你设置：
  • 要么设置 proximity
  • 要么设置 li{ max-height: 100vh; overflow-y: auto; } 并将内容放入 div 中。但这对用户来说非常难以管理。
  • 要么使用旧版 jQuery，如下面的演示所示
请参阅：CSS TRICKS SCROLL SNAP 使用纯 jQuery 的演示： 

var items = $(".item");
var animating = false;

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    if (!animating) {
        $.data(this, 'scrollTimer', setTimeout(function() {
          var count = 0;
          items.each(function(key, value) {
            /** Adjust the 200 value to make scroll larger than 200px before and after the top of the item **/
           /** You can even make the value dynamic depending on screen by getting the viewport height and apply a percentage to it. ie: $( window ).height() * .8 ; **/
            if (($(window).scrollTop() > ($(value).offset().top - 200)
            && ($(window).scrollTop() - $(value).offset().top) < 200)
            || ($(window).scrollTop() > ($(value).offset().top + 200)
            && ($(window).scrollTop() - $(value).offset().top) < 200)) {
              animating = true;
              $('html, body').animate( { scrollTop: $(value).offset().top }, 250);
              setTimeout(function() { animating = false; }, 300);
              return false;
            }
          });
        }, 200));
    }
});
li {
    padding-bottom: 40px;
    font-size: 2.2rem;
    text-align: center;
    justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul>
        <li class="item"><div>Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br /></div></li>
        <li class="item"><div>fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br /></div></li>
  
  <li class="item"><div>Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br /></div></li>
        <li><div>fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br /></div></li>
  
  <li><div>Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br /></div></li>
        <li class="item"><div>fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br /></div></li>
  
  <li class="item"><div>Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br />Lorem, ipsum dolor.<br /></div></li>
        <li class="item"><div>fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br />fugit cenas bla bla<br /></div></li>
</ul>
</div>

1
我认为Safari实施“强制性”功能的方法不如其他浏览器。当滚动时，我期望内容在每个部分的开头被强制捕捉，除非该部分大于视口大小，这种情况下只有在到达该部分的末尾时才会发生捕捉（这是Chrome等浏览器的行为）。 - xfze
就你提出的第二个解决方案而言，它比我目前的方案更好，但仍然无法完全复制 Chrome/FF 等浏览器的行为... 在设置了要滚动的部分的 max-height/overflow-y 后，Safari 确实允许更大的部分被滚动到末尾（并被用户阅读！），然后才会捕捉下一个部分的开头（它不会像 proximity 那样等到下一个部分的中间位置才捕捉，而是在到达部分 A 的末尾时捕捉到部分 B 的开头，这正是我们想要的）。但还有两个差异： - xfze
1
@xfze 是的，但正如我在js代码中所说的，您可以通过修改200的值或使用“您甚至可以根据屏幕获取视口高度并应用百分比来使该值动态化。例如：$( window ).height() * .8 ;”来管理所需的距离。因为现在它只是从部分的200像素处开始，但您可以通过动态方式将其设置为400像素或任何您想要的距离。 - MaxiGui
1
是的，使用JS使其动态化并在到达前一个部分底部时将下一个部分的开头捕捉到屏幕顶部肯定是可能的。我只是更喜欢CSS修复，因为我的网站已经有太多JS了，而且还想确保在打开错误之前是否有CSS方法可以使Safari表现“正常”。无论如何，感谢您的帮助，您绝对值得这份赏金;) - xfze
非常感谢。很抱歉没有更好的方法。 - MaxiGui
显示剩余4条评论
0

你尝试使用过 -webkit 吗？

Safari 中一些 -webkit-scroll-snap 的示例：https://webkit.org/demos/scroll-snap/index.html

也许：

div {
    max-height: 100vh;
    overflow: scroll;
    -webkit-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory;
}

li {
    -webkit-scroll-snap-align: start;
    scroll-snap-align: start;
}
1
可以从提供的 CodePen 演示中看出，这并不起作用。问题不在于没有强制滚动捕捉，即使没有 -webkit 也可以工作，但它只是不能很好地处理长节（而其他浏览器可以）。 - xfze
1
@xfze 明白了 - 我不确定是否有一个好的CSS解决方案...正如其他人提到的，你可以尝试一个不太优雅的Javascript解决方案和scrollTop，但是动画会更加棘手。 - Hello World
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接