使用 CSS 和 jquery 应用滚动效果

Question

我正在寻找例如在此页面上使用的特殊滚动效果： http://www.lemonde.fr/ameriques/visuel/2014/10/10/voix-d-outretombe-les-derniers-mots-de-condamnes-a-mort-executes-au-texas_4501418_3222.html 当您滚动时，页面不会跟随您的滚动，而是跟随动画。我不知道该怎么做。我尝试使用 jquery 和滚动事件，它在 chrome 上运行，但在 safari 上运行，并且肯定不如示例流畅。 我想我必须考虑滚动“速度”但不知道如何做一些平滑的事情。

知道怎么做吗？ （我宁愿有一个解释而不是一个插件，但每个答案都是最受欢迎的）。 谢谢

Answer 1

这个概念类似于任何 jquery 滑块（但略有不同）

1. 将您的网站拆分为 100% 和 100% 高度的单独页面（单独的 div）（基本上一个 div 必须覆盖查看窗口）；

2. 使用CSS隐藏滚动条； 使用下面的代码

   body{
       overflow:hidden;
   }
   

3. 然后绑定一个函数到窗口滚动事件

   $(window).scroll(function(){
   
   })
   

4. 检测滚动。如果滚动是down，则动画到下一页，否则如果滚动是up，则动画到上一页。 使用下面的代码来测试上下滚动

   var lastScrollTop = 0;
   $(window).scroll(function(event){
       var st = $(this).scrollTop();
       if (st > lastScrollTop){
           // downscroll code
       } else {
           // upscroll code
       }
       lastScrollTop = st;
   });
   

   使用以下脚本为页面设置动画

   $('html,body').animate({scrollTop : $('div id').offset().top})
   

   所以它会类似于

   var lastScrollTop = 0;
   $(window).scroll(function(event){
       var st = $(this).scrollTop();
       if (st > lastScrollTop){
           $('html,body').animate({scrollTop : $('next div id').offset().top})
       } else {
           $('html,body').animate({scrollTop : $('prev div id').offset().top})
       }
       lastScrollTop = st;
   });