如何滚动浏览内容并停留在段落

How can I scroll through content and stick at paragraphs

本文关键字：停留在 段落 浏览 何滚动 滚动      更新时间：2023-09-26

对于我的网站，我有一个400像素宽乘200像素高的div。我在这个框里有很多文本，它是用来滚动浏览的。我想设置它，这样当我向下滚动div时，每个段落都会一直滚动，直到你滚动到足够远，下一段可以快速向上滑动。当新的滚动进来时，我想要一个几乎反弹的效果，比如我手动快速滚动，然后慢速滚动，然后停止。我如何通过CSS3、HTML5或JavaScript进行编码？

这是一篇很棒的新文章（由SARAH DRASNER撰写），其中有一个您正试图实现的示例：CSS滚动捕捉点

新的CSS Scroll Snap Points规范非常新，并非所有浏览器都支持，但您应该使用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

相关文章：