我希望用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>
但是，此代码仅在滚动条触及底部时才有效。
我希望它在用户距离底部 100 像素时起作用。 （或靠近底部）
我还需要代码能够在大多数现代浏览器、移动设备等中工作。
另外，有什么办法可以改进这段代码吗？请建议。
如果代码有任何错误，请指正。
谢谢
首先我认为你不必再支持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();
}
};
另见jsfiddle http://jsfiddle.net/8LpFR/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
