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和scroll事件，它正在使用chrome而不是safari，并且肯定不如示例那么平滑。我想我必须考虑滚动“速度”，但不知道如何做一些平滑的事情。

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

Answer 1

这个概念类似于任何jquery滑块（但差别很小）

将您的网站拆分为单独的页面（单独的div），100％和高度100％（基本上一个div必须覆盖查看窗口）;
使用CSS隐藏滚动条; 使用以下代码
```
body{
    overflow:hidden;
}
```
然后将函数绑定到窗口滚动事件
```
$(window).scroll(function(){

})
```

检测滚动条。如果滚动是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;
});

使用CSS和jquery应用滚动效果

1 个答案: