Question

对于我的网站，我有一个400px宽，200px高的div。我在这个框中有很多文本，它意味着滚动浏览。我想要设置它，以便当我向下滚动div时，每个段落都会粘住，直到你滚动得足够远，以便下一个快速向上滑动。我想要几乎一个弹跳效果，因为新的滑入，如我手动滚动快，然后慢，然后我停止。我如何通过CSS3和HTML5或JavaScript编写代码？

Answer 1

这是一篇很棒的新文章（由SARAH DRASNER撰写），其中包含您正在努力实现的目标：CSS Scroll Snap Points

新的CSS Scroll Snap Points spec非常新，并不是所有浏览器都支持，但您应该使用polyfill添加必要的支持。

这个css的神奇之处在于

  -webkit-scroll-snap-points-y: repeat(100%);
      -ms-scroll-snap-points-y: repeat(100%);
          scroll-snap-points-y: repeat(100%);

  -webkit-scroll-snap-type: mandatory;
      -ms-scroll-snap-type: mandatory;
          scroll-snap-type: mandatory;

  -webkit-scroll-snap-destination: 100% 0%;
      -ms-scroll-snap-destination: 100% 0%;
          scroll-snap-destination: 100% 0%;

以下是http://codepen.io/sdras/pen/43c9d13b23bc34a85bb3a5e2ea985958

的代码示例

如何滚动内容并坚持段落

1 个答案: