Javascript中的无限滚动条
我正在编写一个图书查看器，在用户向下滚动时动态加载内容。我遇到的第一个问题是如何设置滚动条。因为我们只在数据库中存储段落，没有大小信息，所以我只能猜测文档的长度。基于这样的猜测，我可能想创建一个显示10000像素长的可滚动窗口，并根据需要加载段落 我能想到的最简单的方法是实际创建一个10000像素长的DIV，并将一个嵌入的DIV绝对定位在显示我的内容的滚动位置 有没有一种方法可以完全控制Javascript下的滚动条（设置滚动条的最小值、最大值、位置、相对拇指大小），或者我可以采用上面提到的简单方法，或者有其他方法来实现这一点Javascript中的无限滚动条,javascript,scrollbar,Javascript,Scrollbar,我正在编写一个图书查看器，在用户向下滚动时动态加载内容。我遇到的第一个问题是如何设置滚动条。因为我们只在数据库中存储段落，没有大小信息，所以我只能猜测文档的长度。基于这样的猜测，我可能想创建一个显示10000像素长的可滚动窗口，并根据需要加载段落 我能想到的最简单的方法是实际创建一个10000像素长的DIV，并将一个嵌入的DIV绝对定位在显示我的内容的滚动位置 有没有一种方法可以完全控制Javascript下的滚动条（设置滚动条的最小值、最大值、位置、相对拇指大小），或者我可以采用上面提到的简单
我正在使用ExtJS框架，但它似乎没有提供任何直接帮助，尽管V4确实包含一个无限网格。试试我今天早上在《粉碎》杂志上找到的无限滚动条：
以下是一些方法： 无限卷轴 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 ) });
}
);
//滚动检测
$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）==$（文档）.height（）-$（窗口）.height（））{
lastPostFunc（）；
}
});
//加载更多内容
函数lastPostFunc（）
{
$(’最后一名邮递员™).html（英文）™â€™);
$.post（“scroll.asp？action=getLastPosts&lastID=”+$（“.wrdLatest:last”）.attr（“id”），
功能（数据）{
如果（数据！=“”）{
$（.wrdLatest:last”）。在（数据）之后；
}
$(’最后一名邮递员™).空（）；
});
};
// 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
});
//对包围的元素调用infinitescroll（）
//您将加载更多的项目
$（'#content'）。无限滚动({
导航选择器：“div.navigation”，
//分页导航的选择器（它将被隐藏）
下一个选择器：“div.navigation a:first”，
//下一个链接的选择器（至第2页）
项目选择器：“#content div.post”
//将检索的所有项目的选择器
});
所有选项
//用法：
//$（elem）.infinitescroll（选项，[callback]）；
//对包围的元素调用infinitescroll（）
//您将加载更多的项目
$（'#content'）。无限滚动({
导航选择器：“div.navigation”，
//分页导航的选择器（它将被隐藏）
下一个选择器：“div.navigation a:first”，
//下一个链接的选择器（至第2页）
项目选择器：“#content div.post”，
//将检索的所有项目的选择器
是的，
//启用调试消息传递（到console.log）
加载img:“/img/loading.gif”，
//正在加载图像。
//默认值：“http://www.infinite-scroll.com/loading.gif"
加载文本：“加载新帖子…”，
//加载图像时伴随的文本
//默认值：“加载下一组帖子…”
动画：对，
//布尔值，如果页面在加载新内容时将进行动画滚动
//默认值：false
外星X:50，
//页面将滚动的附加像素数
//（除了装载舱的高度）
//“动画”必须为真才能起作用
//默认值：150
donetext：“我想我们已经走到了尽头，吉姆”，
//检索所有项目时显示的文本
//默认值：“祝贺你，你已经到达互联网的尽头。”
缓冲区px:40，
//如果你想更快的开火，增加这个数字
//（高数字表示用户将看不到加载消息）
//1.2中的新功能
//默认值：40
errorCallback:函数（）{}，
//当请求的404页或没有更多内容时调用
//1.2中的新功能
localMode:true
//启用溢出：自动框以具有相同的功能
//演示：http://paulirish.com/demo/infscr
//而不是看着整个窗口滚动这个插件的元素
//被召唤的人将被监视
//1.2中的新功能
//默认值：false
}，函数（ArrayOfNewLems）{
//成功加载新内容时的可选回调。
//关键字`this`将引用刚刚添加的新DOM内容。
//从1.5开始，`this`匹配您调用插件的元素（例如#content）
//找到的所有新元素都作为数组传入
});
//将第2页的所有post div加载到一个off-DOM div中
$（''）.load（'/page/2/#content div.post'，function（）{
$（this）.appendTo（“#content”）；//加载后，将它们附加到我们的内容区域
});
函数lastPostFunc（）
{
$（'div#lastposloader'）.html（“”）；
$.post（“scroll.asp？action=getLastPosts&lastID=”+$（“.wrdLatest:last”）.attr（“id”），
功能（数据）{
如果（数据！=“”）{
$（.wrdLatest:last”）。在（数据）之后；
}
$（'div#lastposloader'）.empty（）；
});
};
$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）==$（文档）.height（）-$（窗口）.height（））{
lastPostFunc（）；
}
});
// 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
});
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();
}
});