我正在编写一个图书查看器，它可以在用户向下滚动时动态加载内容。我遇到的第一个问题是如何设置滚动条。由于我们只在数据库中存储没有大小信息的段落，我只能猜测文档的长度。基于这样的猜测，我可能想要创建一个显示为 10,000 像素长并根据需要加载段落的可滚动窗口。
我能想到的最简单的方法是实际创建一个 10,000 像素长的 DIV，并将嵌入的 div 绝对定位在显示我的内容的滚动位置。
有没有办法在 Javascript 下完全控制滚动条（设置它的最小、最大、位置、相对拇指大小）或者我是按照上面提到的简单方法还是有其他方法可以做到这一点？
我正在使用 ExtJS 框架，但它似乎没有提供任何直接帮助，尽管 V4 确实包含无限网格。
【问题讨论】：
标签： javascript scrollbar
这个问题的其他答案只是在用户到达底部时扩展了内容，这不是我想要的。我需要显示一个全尺寸但人口稀少的可滚动区域。我想出的解决方案非常简单：
我为书中的每个段落创建了一个可滚动的 DIV（称之为 book），其中包含一组内部 DIV。我需要逐段进行，因为这在我们的应用程序中具有特殊含义，否则，您可能会逐页进行。段落 DIV 有一个默认大小，基于对它们大小的猜测。
当书籍 DIV 滚动时，javascript 会计算哪些段落 DIV 现在可见。那些可见但未填充的将捆绑在一起。然后使用 Web 服务填充所需的段落 DIV 并准确调整它们的大小。
我使用的算法捆绑了一些周围（不可见）的段落，以提供一些预读和分块效率。屏幕更新后，惰性加载器会读取更多段落以进一步帮助平滑滚动。
原来这也很简单。困难在于分块算法和添加惰性阅读器。
【讨论】：
这里有很多方法：
砌体无限卷轴 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 滚动时加载内容（另一个无插件示例） 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();
}
});
【讨论】：
试试我今天早上在 Smashing Magazine 上找到的这个无限卷轴：
http://markholton.com/posts/17-infiniscroll-jquery-plugin-released
【讨论】：