Question

Firefox 39，Safari 9和IE11支持CSS Scroll Snap Points。 Chrome具有in development功能。

是否存在可以模拟以下CSS样式的polyfill：

-webkit-scroll-snap-type: mandatory;
-ms-scroll-snap-type: mandatory;
scroll-snap-type: mandatory;
-webkit-scroll-behavior: smooth;
-ms-scroll-behavior: smooth;
scroll-behavior: smooth;
-webkit-scroll-snap-points-y: repeat(600px);
-ms-scroll-snap-points-y: snapInterval(0px, 600px); /* Old syntax */
scroll-snap-points-y: repeat(600px);
overflow-y: auto;
overflow-x: hidden;

直到该功能由Chrome实施？

Answer 1

如果您愿意考虑使用此功能的 vanilla javascript重新实现并使用一致的跨浏览器行为，则可以使用的 this library

<强>为什么

使用它而不是原生css解决方案的主要原因是它适用于所有现代浏览器，并且具有可自定义的配置，允许在转换和滚动检测中自定义时序。

如何

库使用vanilla javascript缓动函数重新实现css捕捉功能，并使用容器元素的<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <table class="table" > <tr class="bg-primary"> <th> Firstname </th> <th> Surname </th> <th></th> </tr> <tr> <td>John</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Roe</td> </tr> </table> / scrollTop属性和滚动事件的值进行工作听者

示例

scrollLeft