使用 javascript 实现无限滚动效果答案

【问题标题】：Infinite Scroll Effect with javascript使用 javascript 实现无限滚动效果
【发布时间】：2014-06-06 23:18:02
【问题描述】：

有人知道如何制作这样的滚动效果吗？ http://www.eurekasoft.com

我知道内容在结尾处重复以产生错觉，但我想知道如何实现看似永无止境的滚动。

谢谢！

【问题讨论】：

w3schools.com/jquery/css_scrolltop.asp ..读出scrollTop，当scrollTop = websiteHeight-screenHeight时，将scrollTop设置回0（显然sebsiteHeight和screenHeight不是官方的方法/属性，但是有些人会让你得到这些值）

标签： javascript scroll infinite-scroll

【解决方案1】：

该网站似乎正在使用 Skrollr：http://prinzhorn.github.io/skrollr/

一直向下滚动以获取指向 Github 的链接和更多示例。

在深处，它使用函数 window.scrollTo() 来设置滚动位置，并可能在该区域周围设置 DOM，使其看起来与滚动的位置相同。

https://github.com/Prinzhorn/skrollr/blob/master/src/skrollr.js#L617

【讨论】：

【解决方案2】：

这对我有用:)

示例如下：http://www.cancerbero.mx（仅在 Chrome 和 Safari 中启用）

// #loop is the div ID where repetition begins

$(document).ready(function(){
            $(window).scroll(function(){
                var scroll = $(window).scrollTop();
                var limit = $('#loop').position().top;
                if(scroll >= limit){
                    window.scrollTo(0,1); // 1 to avoid conflicts
                }
                if(scroll == 0){
                  window.scrollTo(0,limit);  
                }
            });
        });

【讨论】：