Javascript 中的无限滚动条

Question

我正在编写一个图书查看器，当用户向下滚动到内容时，它会动态加载内容。我遇到的第一个问题是如何设置滚动条。由于我们只在数据库中存储段落，没有大小信息，因此我只能猜测文档的长度。基于这样的猜测，我可能想要创建一个显示 10,000 像素长并根据需要加载段落的可滚动窗口。

我能想到的最简单的方法是实际创建一个 10,000 像素长的 DIV，并将嵌入的 div 绝对定位在显示我的内容的滚动位置。

有没有一种方法可以完全控制Javascript下的滚动条（设置其最小值、最大值、位置、相对拇指大小），或者我是否采用上面提到的简单方法，或者还有其他方法可以做到这一点？

我正在使用 ExtJS 框架，但它似乎没有提供任何直接帮助，尽管 V4 确实包含一个无限网格。

Answer 1

这个问题的其他答案只是在用户到达底部时扩展了内容，这不是我想要的。我需要显示一个全尺寸但人口稀少的可滚动区域。我想出的解决方案非常简单：

我创建了一个可滚动的 DIV（称之为书），其中为书中的每个段落设置了一组内部 DIV。我需要逐段进行，因为这在我们的应用程序中具有特殊含义，否则，您可能会逐页进行。段落 DIV 具有基于对其大小的猜测的默认大小。

当书籍 DIV 滚动时，JavaScript 会计算哪些段落 DIV 现在可见。那些可见但未填充的被捆绑在一起。然后使用 Web 服务填充所需的段落 DIV 并准确调整它们的大小。

我使用的算法捆绑了一些周围的（不是不可见的）段落，以提供一些预读和分块效率。一旦屏幕更新以进一步帮助平滑滚动，惰性加载程序就会读取更多段落。

事实证明这也非常简单。困难的工作在于分块算法和添加一个懒惰的阅读器。

Answer 2

这里有多种方法：

Masonry 无限滚动 http: //desandro.com/demo/masonry/docs/infinite-scroll.html

Cpde 示例：

$wall.infinitescroll({
  navSelector  : '#page_nav',  // selector for the paged navigation 
  nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)
  itemSelector : '.box',     // selector for all items you'll retrieve
  loadingImg : 'img/loader.gif',
  donetext  : 'No more pages to load.',
  debug: false,
  errorCallback: function() { 
    // fade out the error message after 2 seconds
    $('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   
  }
  },
  // call masonry as a callback
  function( newElements ) { 
    $(this).masonry({ appendedContent: $( newElements ) }); 
  }
);

AJAXian 方式（无插件） http://ajaxian.com/archives/implementing-infinite-scrolling-with-jquery

代码：

//Scroll Detection
$(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           lastPostFunc();
        }
});

//Loading More content
function lastPostFunc()
{
    $(’div#lastPostsLoader’).html(’<img src="bigLoader.gif"/>’);
    $.post("scroll.asp?action=getLastPosts&lastID=" + $(".wrdLatest:last").attr("id"),   

    function(data){
        if (data != "") {
        $(".wrdLatest:last").after(data);           
        }
        $(’div#lastPostsLoader’).empty();
    });
};

无限滚动 jQuery 插件（最初是 WordPress 插件） http://www.infinite-scroll .com/infinite-scroll-jquery-plugin/

示例代码：

// infinitescroll() is called on the element that surrounds 
// the items you will be loading more of
  $('#content').infinitescroll({

    navSelector  : "div.navigation",            
                   // selector for the paged navigation (it will be hidden)
    nextSelector : "div.navigation a:first",    
                   // selector for the NEXT link (to page 2)
    itemSelector : "#content div.post"          
                   // selector for all items you'll retrieve
  });
All options


// usage:
// $(elem).infinitescroll(options,[callback]);

// infinitescroll() is called on the element that surrounds 
// the items you will be loading more of
$('#content').infinitescroll({

  navSelector  : "div.navigation",            
                 // selector for the paged navigation (it will be hidden)

  nextSelector : "div.navigation a:first",    
                 // selector for the NEXT link (to page 2)

  itemSelector : "#content div.post",          
                 // selector for all items you'll retrieve

  debug        : true,                        
                 // enable debug messaging ( to console.log )

  loadingImg   : "/img/loading.gif",          
                 // loading image.
                 // default: "http://www.infinite-scroll.com/loading.gif"

  loadingText  : "Loading new posts...",      
                 // text accompanying loading image
                 // default: "<em>Loading the next set of posts...</em>"

  animate      : true,      
                 // boolean, if the page will do an animated scroll when new content loads
                 // default: false

  extraScrollPx: 50,      
                 // number of additonal pixels that the page will scroll 
                 // (in addition to the height of the loading div)
                 // animate must be true for this to matter
                 // default: 150

  donetext     : "I think we've hit the end, Jim" ,
                 // text displayed when all items have been retrieved
                 // default: "<em>Congratulations, you've reached the end of the internet.</em>"

  bufferPx     : 40,
                 // increase this number if you want infscroll to fire quicker
                 // (a high number means a user will not see the loading message)
                 // new in 1.2
                 // default: 40

  errorCallback: function(){},
                 // called when a requested page 404's or when there is no more content
                 // new in 1.2                   

  localMode    : true
                 // enable an overflow:auto box to have the same functionality
                 // demo: http://paulirish.com/demo/infscr
                 // instead of watching the entire window scrolling the element this plugin
                 //   was called on will be watched
                 // new in 1.2
                 // default: false


    },function(arrayOfNewElems){

     // optional callback when new content is successfully loaded in.

     // keyword `this` will refer to the new DOM content that was just added.
     // as of 1.5, `this` matches the element you called the plugin on (e.g. #content)
     //                   all the new elements that were found are passed in as an array

});

// load all post divs from page 2 into an off-DOM div
$('<div/>').load('/page/2/ #content div.post',function(){ 
    $(this).appendTo('#content');    // once they're loaded, append them to our content area
});

使用 jQuery 滚动时加载内容（另一个无 PLugin 示例） http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

代码：

function lastPostFunc() 
{ 
    $('div#lastPostsLoader').html('<img src="bigLoader.gif">');
    $.post("scroll.asp?action=getLastPosts&lastID=" + $(".wrdLatest:last").attr("id"),     

    function(data){
        if (data != "") {
        $(".wrdLatest:last").after(data);            
        }
        $('div#lastPostsLoader').empty();
    });
}; 

$(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           lastPostFunc();
        }
});

Answer 3

尝试一下我今天早上在 Smashing Magazine 上找到的无限滚动条：

http://markholton.com /posts/17-infiniscroll-jquery-plugin-released