Question

初学者。你能帮我理解为什么这个水平滚动按钮填充不能在Chrome 53上运行吗？ polyfill适用于其他人，所以我怀疑它是一个错误： https://github.com/ckrack/scrollsnap-polyfill

我已尝试加载捆绑版本，然后是非捆绑版本，之后无法正常工作。目前，我的HTML看起来像这样（非捆绑脚本）：

writerows()

应以正确的顺序加载这些脚本。脚本本身名称相同，存储在我的根目录中（我目前没有子文件夹）。这是我的CSS课程的样子：

    <script src="polyfill.js"></script>
    <script src="scrollsnap-polyfill.js"></script>
</body>
</html>

我根据此博客设置了上述内容，该博客提供了使用相同填充的示例：https://css-tricks.com/introducing-css-scroll-snap-points/

在我启动服务器以直接在浏览器中打开HTML后，控制台中没有错误：

任何提示？

Answer 1

刚刚跟进！我和朋友一起看了这个，我们发现了。问题是scrollsnap-polyfill.js中的scroll事件没有触发。此事件恰好由屏幕溢出触发。如果JS检测到视口宽度或高度（在我的情况下是宽度）溢出，它将触发快照。

最初，我的代码设置为我的HTML中有三个div，并且屏幕会拉伸以容纳所有三个div作为一个滚动。因为屏幕伸展，没有任何溢出。事件并没有解决。

为了解决这个问题，我改变了CSS卷轴类，如下所示：

.scroller {
    /*This scroll-snap functionality only works in Safari*/
    -webkit-scroll-snap-type: mandatory;
    -webkit-scroll-snap-points-x: repeat(100%);

    /*This scroll snap functionality is part of a polyfill 
    that enables the functionality in Chrome.*/
    scroll-snap-type: mandatory;
    scroll-snap-destination: 0% 100%;
    scroll-snap-points-x: repeat(100%);
    /*Here, I've set the width to be 100% of the VW 
    (the portion of the screen that the viewer sees before scrolling).
    Thus, overflow occurs (because my divs stretch three screens or three VWs, basically)
    and the scroll event from scrollsnap-polyfill.js is triggered.*/
    width: 100vw;
    overflow: auto;
}

您可以忽略Safari的顶部。基本上，我通过添加宽度和溢出参数创建了溢出。因此，我的屏幕宽度不再是所有三个div的宽度 - 它一次只是一个div的宽度 - 而其他div的溢出触发了JS中的scroll事件。

如果您很想知道我最初设置我的div的方式，您可以查看我遵循的YouTube教程。 https://www.youtube.com/watch?v=jXto4uITMCY

无法获得水平滚动捕捉功能（Chrome）

1 个答案: