使用CSS和jquery应用滚动效果

Apply Scrolling effect using CSS and jquery

本文关键字：滚动 应用 jquery CSS 使用      更新时间：2023-09-26

我正在寻找一种特殊的滚动效果，例如在这个页面上使用：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上不工作，而且肯定不如示例中流畅。我想我必须考虑滚动的"速度"，但不知道如何做一些平滑的事情。

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

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

  1. 将您的网站拆分为单独的页面（单独的div），高度为100%（基本上一个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;
});
相关文章：