Question

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

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

有没有办法在Javascript下完全控制滚动条（设置其最小值，最大值，位置，相对拇指大小），还是按照上面提到的简单方法进行操作，还是有其他方法可以做到这一点？

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

Answer 1

以下是多种方式：

Masonry Infinite Scroll 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 Way（无插件） 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 2

这个问题的其他答案只是在用户到达底部时扩展了内容，这不是我所追求的。我需要显示一个完整大小但人烟稀少的可滚动区域。我提出的解决方案非常简单：

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

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

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

事实证明这也很简单。艰苦的工作是在分块算法中添加一个懒惰的读者。

Answer 3

尝试今天早上在Smashing Magazine上找到的无限卷轴：

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

Javascript中的无限滚动条

3 个答案: