Question

当用户向下滚动到页面的末尾时，我试图将数据附加到html表，这是我能够做到的。但是如何保持滚动次数？在每个实例中，我需要将计数加1，每次我的url将被该计数追加..当计数达到6时，我应该停止将计数附加到网址。请分享一些关于如何处理这个问题的想法......

这里添加了

test file ...

Answer 1

var count = 1;  
jQuery("#scrollPane").scroll(function() {
    if (Math.ceil(boxHeight - $inner.offset().top + boxOffsetTop) >= innerOuterHeight ) {
    if(count==6)
    {
        alert("stop");
    }
    count++;

}
});

http://jsfiddle.net/sk5yc/4/

Answer 2

var counter = 1;
$(window).bind('scroll', function() {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        alert(counter + " scroll me again");
        counter++;
        if (counter > 6) {
            $(this).unbind('scroll');
            alert('no more scrolling')
        }
    }
});

-10表示在执行函数之前，用户必须离页面末端有多远。这使您可以根据需要灵活地调整行为。

当计数达到6时，它将取消绑定滚动。因此该功能已关闭。

检查http://jsfiddle.net/wQfMx/3/

处的工作示例

Answer 3

像这样跟踪滚动可能会导致问题。

我写了一篇跟踪滚动深度并将信息报告回Google Analytics的文章。

在我的开发中，我发现滚动事件被多次触发，比我预期的要多得多。它跟踪计数将是非常不可预测的。我认为跟踪你是否90％向下滚动文档可能会更好。但是，您还需要一个触发机制来停止处理事件，直到您准备好处理更多事件，否则您将最终快速连续地进行一系列加载内容调用。

当您达到文档的90％滚动深度时，将触发以下代码。然后它会自行锁定并且不再触发事件。加载完内容后，可以将IsDuplicateScrollEvent重置为0，滚动加载触发器将再次运行。

<script src='http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js' type='text/javascript'></script> 
<script type='text/javascript'>
/* <![CDATA[ */
    var IsDuplicateScrollEvent = 0;

    $(document).ready(function () {
        TrackEventsForPageScroll();
    });


    function TrackEventsForPageScroll()
    {
       $(window).scroll(function(){
         var scrollPercent = GetScrollPercent();

         if(scrollPercent > 90)
         {
           if(IsDuplicateScrollEvent == 0)
           { 
             IsDuplicateScrollEvent = 1;
             alert("Page Scrolled to 90% in " + document.location.href);
             // trigger your content load here
           }
         }
       }); 
    }

    function GetScrollPercent()
    {
         var bottom = $(window).height() + $(window).scrollTop();
         var height = $(document).height();

         return Math.round(100*bottom/height);
    } 
/* ]]> */
</script>

此代码取自我的文章：

http://runtingsproper.blogspot.com/2011/04/tracking-scroll-depth-to-reveal-content.html

Answer 4

你在尝试'无限卷轴'吗？如果是这种情况，那么已经有一些jquery插件，如http://plugins.jquery.com/project/scrollLoad

还有像http://ajaxian.com/archives/implementing-infinite-scrolling-with-jquery

这样的教程

如何获取Scroll事件并计算滚动事件的数量

4 个答案:

检查http://jsfiddle.net/wQfMx/3/