Fatal编程技术网
  • javascript/
  • 如何在纯Javascript中进行无限滚动

如何在纯Javascript中进行无限滚动

javascript firefox scroll

如何在纯Javascript中进行无限滚动,javascript,firefox,scroll,infinite-scroll,Javascript,Firefox,Scroll,Infinite Scroll,我想避免使用jQuery或其他库，以使代码保持最少，我只需要很少的特性，我只想在用户滚动到底部时附加到列表中。我将如何在纯Javascript中实现这一点 domElem.addEventListener( 'scroll', function(evt) { ... }, false ); 并适当地处理evt/滚动位置。基本上，您只需要挂起事件滚动，检查用户是否向下滚动了足够多的内容，如果是，则添加一些内容： <html>&

我想避免使用jQuery或其他库，以使代码保持最少，我只需要很少的特性，我只想在用户滚动到底部时附加到列表中。我将如何在纯Javascript中实现这一点

domElem.addEventListener(
        'scroll',
        function(evt) { ... },
        false
    );
并适当地处理evt/滚动位置。

基本上，您只需要挂起事件滚动，检查用户是否向下滚动了足够多的内容，如果是，则添加一些内容：

<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>


滚动以了解
//我们将添加此内容，替换您要添加的任何内容
var-more=''；
var wrapper=document.getElementById（“wrapper”）；
var content=document.getElementById（“内容”）；
var测试=document.getElementById（“测试”）；
content.innerHTML=更多；
//跨浏览器addEvent，今天您可以安全地使用addEventListener
功能加法器（obj、ev、fn）{
if（obj.addEventListener）obj.addEventListener（ev，fn，false）；
否则，如果（对象附件）对象附件（“on”+ev，fn）；
}
//这是滚动事件处理程序
函数滚动条（）{
//打印相关滚动信息
test.innerHTML=wrapper.scrollTop++“+wrapper.offsetHeight++“+100>”+content.offsetHeight；
//如果用户向下滚动足够多，则添加更多内容
if（wrapper.scrollTop+wrapper.offsetHeight+100>content.offsetHeight）{
content.innerHTML+=更多；
}
}
//将scroll处理程序挂接到scroll事件
addEvent（包装器，“滚动”，滚动条）；
无限滚动的优秀演示代码。这表明，对于任何独立于浏览器的工作，您不需要jQuery和Angular。但是今天的新成员已经不再使用我们这些老家伙仍然信任和使用的纯Javascript了。在这里，我进一步简化了代码：

//我们将添加此内容，替换您要添加的任何内容
var包装、内容、测试；
var-more=''；
//这是滚动事件处理程序
函数滚动条（）{
//打印相关滚动信息
test.innerHTML=wrapper.scrollTop++“+”+wrapper.offsetHeight++“+100>”+content.offsetHeight；
//如果用户向下滚动足够多，则添加更多内容
if（wrapper.scrollTop+wrapper.offsetHeight+100>content.offsetHeight）{
content.innerHTML+=more；//NK：在这里，您可以进行Ajax调用并获取要附加到content.innerHTML的内容
}
}
包装器=document.getElementById（“包装器”）；
内容=document.getElementById（“内容”）；
test=document.getElementById（“test”）；
content.innerHTML=更多；
//将scroll处理程序挂接到scroll事件
if（wrapper.addEventListener）//NK:适用于所有新浏览器
wrapper.addEventListener（“滚动”，滚动，假）；
else if（wrapper.attachEvent）//NK:适用于旧IE
wrapper.attachEvent（“onscroll”，滚动条）

滚动以了解

具有跨浏览器支持的示例代码段：
阅读内联注释了解其工作原理


window.onscroll=函数（ev）{
if（（window.innerHeight+window.scrollY）>=document.body.offsetHeight）{
//用户当前位于页面底部
addNewItem（）；
}
};
函数addNewItem（）{
var itemCount=document.getElementById（“movieList”）.childElementCount；
const itemLimit=10；//要检索的项目总数
//从任何位置检索下一个项目列表
var nextotopitems=getNextItemSimulator（itemCount）；
nextTopItems.forEach（功能（项目）{
//将项目添加到视图中
document.getElementById（“movieList”）.innerHTML+=“”+item+”
”；
document.getElementById（“页脚”）.style.display=“块”；
});
setTimeout（函数（）{
//删除页脚信息消息
document.getElementById（“footer”）.style.display=“无”；}，500）；
}
函数getNextItemSimulator（currentItem）{
//只是一些模拟api响应的虚拟数据
const dummyItemCount=50；
var dummyItems=[]；
var nextTopDummyItems=[]；

对于（i=1；i我看到了您问题的很好答案，但是对于与任何HTML元素或内容（只是一个空HTML页面）无关的滚动，我是这样做的：



document.querySelector（“body”）.style.height=“1000px”；
addEventListener（“滚动”，函数（）{
var body=document.querySelector（“body”）；
变量高度=body.style.height；
高度=高度。切片（0，-2）；
高度=数量（高度）；
返回函数（）{
如果（高度-窗口滚动<700）{
高度+=高度/2；
}
body.style.height=高度+px；
};
}（））；


要实现这种行为，您不需要jQuery或jQuery插件。您只能使用CSS或JavaScript（如果您想覆盖所有浏览器）

但是不要使用
onScroll
：您可以使用vanilla JS和

您所需要做的就是放置元素，并在屏幕上监听它们何时可用。交叉点观察者API非常可定制，以满足您的所有需求


总而言之：只需几行JavaScript和HTML代码就可以实现这一点，这比在浏览器中监听滚动事件要有效得多。
保持代码最小化，避免使用jQuery之类的库，这两个目标是相互矛盾的，说实话。那么，为什么不想使用一行呢？如果你担心像JQuery这样一个巨大的框架来实现这个简单的效果，考虑使用一个微框架，你可以在Micjjscom上找到一个好的列表。实现纯JS无限滚动也是跨平台兼容是非常困难的。@安东尼GRIST：jQuery并不总是好的选择：如果你擅长JavaScript，你就可以编写BETT。在特定情况下编写er代码；如果您不擅长，那么使用某种框架编写的代码会比没有框架编写的代码更糟糕。总之，jQuery只适用于lightbox之类的封闭解决方案，或者您没有时间/金钱进行思考的情况下。我认为不是这样的情况。您是否在看这样的代码：@Anthony:在这种情况下，他是指最小化代码总量，而不是他必须编写的代码量