带有 Ajax 加载内容的无限可滚动 Div? [英] Infinite Scrollable Div with Ajax loaded Content?
本文介绍了带有 Ajax 加载内容的无限可滚动 Div?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在
UPD:jsfiddle 带有放大/缩小按钮的功能:http://jsfiddle.net/hv57s/11/
基于此示例的答案:Indira.js Infinite Scroll
<表格>...<tbody id="scrollable_tbody"><tr>...</tr></tbody><button id="load_button" onclick="load_more(page_number)">显示更多</button><脚本>var scroll_el_id = 'scrollableDiv';var element = $('#scrollableDiv');$(window).unbind('scroll.' + scroll_el_id).bind('scroll.' + scroll_el_id, function(event){var scrollBottom = $(window).scrollTop() + $(window).height();var elementBottom = element[0].scrollHeight + element.offset().top;if(scrollBottom >= elementBottom){eval($(element).attr('data-scroll-callback'));$(window).unbind('scroll.' + scroll_el_id);}});
接下来,您只需附加到 #scrollable_tbody
AJAX 响应,例如:
function load_more(page){$.ajax({type: "GET", url: 'some/url/load_more.php?page='+page,}).完成(功能(html){$('#scrollable_tbody').append(html);});}
<小时>
UPD:我认为您应该为 html,body
设置大尺寸,例如:
html, body{最小宽度:8192px;宽度:8192px;最小高度:8192px;高度:8192px;}
并将视口设置为您想要的大小.
<小时>但是如果你在 body
标签之后设置一些 wrap div
div.wrap{溢出:滚动;-webkit-overflow-scrolling:触摸;/*不要忘记将 your_viewport_* 更改为实际大小,您也可以通过 jQuery 即时执行此操作*/最大高度:your_viewport_height;最小高度:your_viewport_height;高度:your_viewport_height;最大宽度:your_viewport_width;最小高度:your_viewport_width;高度:your_viewport_width;}
在这个元素里面更大的 div
这将是可滚动的.
div.huge{最小宽度:8192px;宽度:8192px;最小高度:8192px;高度:8192px;}
HTML:
<头>...头部><身体><div class="wrap"><div class="巨大的">...