Abh*_*rma 10 javascript firefox scroll infinite-scroll
我想避免使用jQuery或其他库来保持我的代码最小化,我需要很少的功能,我只想在用户滚动到底部时附加到列表.我如何在普通的Javascript中执行此操作？
小智 12
要实现此行为，您不需要 jQuery 或 jQuery 插件。您可以仅使用 CSS 或 JavaScript（如果您想覆盖所有浏览器）。
但不要使用：您只需使用普通 JS 和Intersection Observer APIonScroll即可完成所有这些工作。
您所需要做的就是放置元素并监听它们何时在屏幕上可用。Intersection Observer API 是高度可定制的，可以满足您的所有需求。
总之：您只需几行 JavaScript 和 HTML 代码即可完成此操作，并且它比侦听浏览器中的滚动事件要高效得多。
Jan*_*roň 10
基本上你只需要挂钩事件滚动,检查用户是否向下滚动并添加一些内容,如果是这样:
<html><body>
<div id="test">scroll to understand</div>
<div id="wrapper" style="height: 400px; overflow: auto;">
<div id="content"> </div>
</div>
<script language="JavaScript">
// we will add this content, replace for anything you want to add
var more = '<div style="height: 1000px; background: #EEE;"></div>';
var wrapper = document.getElementById("wrapper");
var content = document.getElementById("content");
var test = document.getElementById("test");
content.innerHTML = more;
// cross browser addEvent, today you can safely use just addEventListener
function addEvent(obj,ev,fn) {
if(obj.addEventListener) obj.addEventListener(ev,fn,false);
else if(obj.attachEvent) obj.attachEvent("on"+ev,fn);
}
// this is the scroll event handler
function scroller() {
// print relevant scroll info
test.innerHTML = wrapper.scrollTop+"+"+wrapper.offsetHeight+"+100>"+content.offsetHeight;
// add more contents if user scrolled down enough
if(wrapper.scrollTop+wrapper.offsetHeight+100>content.offsetHeight) {
content.innerHTML+= more;
}
}
// hook the scroll handler to scroll event
addEvent(wrapper,"scroll",scroller);
</script>
</body></html>
小智 6
优秀的无限滚动演示代码。表明您不需要 jQuery 和 Angular 来进行任何独立于浏览器的工作。但今天的新人已经脱离了我们这些老家伙仍然信任和使用的纯 JavaScript。这里我进一步简化了代码：
// we will add this content, replace for anything you want to add
var wrapper, content, test;
var more = '<div style="height:1000px; background:#EEE;"></div>';
// this is the scroll event handler
function scroller() {
// print relevant scroll info
test.innerHTML = wrapper.scrollTop + " + " + wrapper.offsetHeight + " + 100 > " + content.offsetHeight;
// add more contents if user scrolled down enough
if (wrapper.scrollTop + wrapper.offsetHeight + 100 > content.offsetHeight) {
content.innerHTML += more; // NK: Here you can make an Ajax call and fetch content to append to content.innerHTML
}
}
wrapper = document.getElementById("wrapper");
content = document.getElementById("content");
test = document.getElementById("test");
content.innerHTML = more;
// hook the scroll handler to scroll event
if (wrapper.addEventListener) // NK: Works on all new browsers
wrapper.addEventListener("scroll", scroller, false);
else if (wrapper.attachEvent) // NK: Works on old IE
wrapper.attachEvent("onscroll", scroller);<div id="test">scroll to understand</div>
<div id="wrapper" style="height: 400px; overflow: auto;">
<div id="content"> </div>
</div>domElem.addEventListener(
'scroll',
function(evt) { ... },
false
);
并适当处理 evt/scroll 位置。