如何在没有jquery的情况下仅使用javascript进行无限滚动_Javascript

如何在没有jquery的情况下仅使用javascript进行无限滚动

javascript

如何在没有jquery的情况下仅使用javascript进行无限滚动,javascript,Javascript,我希望使用javascript实现无限滚动，而不使用jquery 我是javascript新手在网上搜索过之后，我得到了这个代码 <!DOCTYPE html><html lang="en"><head><title>scrolling</title> <style> .page {height: 900px;border:solid 1px #ccc} </style> </head> <b

我希望使用javascript实现无限滚动，而不使用jquery

我是javascript新手

在网上搜索过之后，我得到了这个代码

<!DOCTYPE html><html lang="en"><head><title>scrolling</title>
<style>
.page {height: 900px;border:solid 1px #ccc}
</style>
</head>
<body>

<div id="scrollcontent">

<div class="page"></div>

</div>

<script>

//########################
function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
}
return [ scrOfX, scrOfY ];
}

function getDocHeight() {
var D = document;
return Math.max(
    D.body.scrollHeight, D.documentElement.scrollHeight,
    D.body.offsetHeight, D.documentElement.offsetHeight,
    D.body.clientHeight, D.documentElement.clientHeight
);
}

document.addEventListener("scroll", function (event) {
if (getDocHeight() == getScrollXY()[1] + window.innerHeight) 
{ 
  var oldcontent = document.getElementById('scrollcontent');
  oldcontent.innerHTML = oldcontent.innerHTML + '<div class="page">new content loaded</div>';
  document.getElementById("scrollcontent").innerHTML=oldcontent.innerHTML;

}
});
</script>
</body>
</html>

滚动
.page{高度：900px；边框：实心1px#ccc}
//########################
函数getScrollXY（）{
变量scrOfX=0，scrOfY=0；
if（typeof（window.pageYOffset）=“number”）{
//网景兼容
scrOfY=window.pageYOffset；
scrOfX=window.pageXOffset；
}else if（document.body&（document.body.scrollLeft | | document.body.scrollTop））{
//DOM兼容
scrOfY=document.body.scrollTop；
scrOfX=document.body.scrollLeft；
}else if（document.documentElement&（document.documentElement.scrollLeft | | document.documentElement.scrollTop））{
//IE6标准兼容模式
scrOfY=document.documentElement.scrollTop；
scrOfX=document.documentElement.scrollLeft；
}
返回[scrOfX，scrOfY]；
}
函数getDocHeight（）{
var D=文件；
返回Math.max(
D.body.scrollHeight，D.documentElement.scrollHeight，
D.body.offsetHeight，D.documentElement.offsetHeight，
D.body.clientHeight，D.documentElement.clientHeight
);
}
document.addEventListener（“滚动”），函数（事件）{
if（getDocHeight（）==getScrollXY（）[1]+window.innerHeight）
{ 
var oldcontent=document.getElementById（'scrollcontent'）；
oldcontent.innerHTML=oldcontent.innerHTML+“已加载新内容”；
document.getElementById（“scrollcontent”）.innerHTML=oldcontent.innerHTML；
}
});

但是，只有当滚动条接触底部时，此代码才起作用

我希望它能在用户距离底部100像素时工作。（或接近底部）

我还需要在大多数现代浏览器、移动设备等中使用这些代码

还有，有没有办法改进这段代码？请建议

如果代码中有任何错误，请更正

谢谢

替换这行代码怎么样：

if (getDocHeight() == getScrollXY()[1] + window.innerHeight)

以下是：

if (getDocHeight() - 20 <= getScrollXY()[1] + window.innerHeight)

if（getDocHeight（）-20首先，我认为您不必再支持netscape和ie6了
document.addEventListener("scroll", function (event) {
    checkForNewDiv();
});

var checkForNewDiv = function() {
    var lastDiv = document.querySelector("#scroll-content > div:last-child");
    var lastDivOffset = lastDiv.offsetTop + lastDiv.clientHeight;
    var pageOffset = window.pageYOffset + window.innerHeight;

    if(pageOffset > lastDivOffset - 20) {
        var newDiv = document.createElement("div");
        newDiv.innerHTML = "my awesome new div";
        document.getElementById("scroll-content").appendChild(newDiv);
        checkForNewDiv();
    }
};

另请参见
我使用了requestAnimationFrame
而不是监听滚动。我还添加了一个基于时间的节流阀，以避免页面过度工作，并批量添加元素：

var numElementsToAdd=10，
offsetForNewContent=20；
函数检查无限滚动（父选择器、子选择器）{
var lastDiv=document.querySelector（parentSelector+childSelector），
lastDivOffset=lastDiv.offsetTop+lastDiv.clientHeight，
pageOffset=window.pageYOffset+window.innerHeight；
如果（pageOffset>lastDivOffset-offsetForNewContent）{
对于（变量i=0；idiv:last child”）；
lastScrollTime=当前滚动时间；
}
};
更新（）；
#滚动内容>div{
背景：#C0C0；
高度：40px；
边缘底部：5px；
}

试验室
我使用元素的scrollHeight、scrollTop和clientHeight属性来确定滚动是否触底。这是我的代码。我希望它能有所帮助




无限卷轴
无限滚动示例
document.addEventListener（'DOMContentLoaded'，函数（）{
var elm=document.getElementById（'scrollContent'）；
elm.addEventListener（'scroll'，callFuntion）；
函数callFunction（）{
var scrollHeight=elm.scrollHeight；
var scrollTop=elm.scrollTop；
var clientHeight=elm.clientHeight；
如果（scrollHeight scrollTop==clientHeight）{
elm.innerHTML+=“添加了新元素”；
}
}
});
为什么使用jQuery？某些本机属性（如window.outerHeight）在某些浏览器上实际上可能返回不准确的结果。jQuery修复了这一问题，因此您可以依赖于所使用的方法在任何浏览器上返回相同的结果，并且使用速度足够快
下面是一个非常简单的方法，可以在不影响性能的情况下实现无限滚动：
$(window).on('scroll', function() {
    var threshold = 120;
    if (window.pageYOffset > 0 && window.pageYOffset + $(window).outerHeight(false) >= $(document).outerHeight(false) - threshold) {
        // call your infinite scroll callback, like infiniteScrollDebounced($('#mytable'))
    }
}).scroll();

注意：if子句中的条件是故意这样的，因此如果用户不滚动，它将不会在window.pageYOffset>0之后进行计算，也不会进入if（一些微优化；））。零可以替换为20或100，因此这是在站点尝试检查用户是否滚动并需要采取措施后的阈值
我使用debounce延迟加载数据的实际调用（通常网站在无限滚动时加载数据），演示：
所以我有这个方法：
var infiniteScrollDebounced = _.debounce(function($table) {
    var params = $table.data('table-params');
    // Don't request any more if we have reached the end
    if (params.end)
        return;

    params.page++;
    params.append = true;

    GridHelper.reload($table, null, params);
}, 100, true);

我的表附加了数据来保存当前进度（页面、排序、筛选等），这些数据被检索并传递到查询中，因此每次我都会得到正确排序和筛选的结果。GridHelper.reload（）函数处理请求并在数据到达时更新表的参数（新参数是响应的一部分）。
要实现该行为，您不需要JQuery
或JQuery插件。您只需要纯Css或Css+Javascript
，这取决于您想要支持的百分比
但是。。。不要使用onScroll
：只需使用普通Javascript
和IntersectionObserver API
即可完成所有这些
您所需要做的就是放置元素，并在它们在屏幕上可用时进行侦听。只需几行javascript和html就可以实现这一点，而且性能更高