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

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

有没有办法完全控制Javascript下的滚动条(设置其最小值,最大值,位置,相对拇指大小)或者我是按照上面提到的简单方法还是有其他方法来做到这一点？

我使用的是ExtJS框架,但它似乎没有提供任何直接帮助,尽管V4确实包含无限网格.

解决方法:

这有以下几种方式：

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(No Plugin)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();
        }
});