如何检测浏览器窗口是否滚动到底部
How to detect if browser window is scrolled to bottom?
我需要检测用户是否滚动到页面底部。如果它们位于页面底部,当我向底部添加新内容时,我会自动将它们滚动到新的底部。如果他们不在底部,他们正在阅读页面上更高的先前内容,所以我不想自动滚动它们,因为他们想留在原地。
如何检测用户是否已滚动到页面底部或是否已在页面上滚动到更高位置?
window.onscroll = function(ev) {
if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
// you're at the bottom of the page
}
};
查看演示
所有主要浏览器支持的代码(包括 IE10 和 IE11(
window.onscroll = function(ev) {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
alert("you're at the bottom of the page");
}
};
当前接受的答案的问题在于window.scrollY
在IE中不可用。
以下是 mdn 关于 scrollY 的引述:
为了实现跨浏览器兼容性,请使用 window.pageYOffset 而不是 window.scrollY。
还有一个工作片段:
window.onscroll = function(ev) {
if ((window.innerHeight + window.pageYOffset ) >= document.body.offsetHeight) {
alert("you're at the bottom of the page");
}
};
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
苹果电脑注意事项
根据@Raphaël的评论,由于偏移量很小,mac 中存在问题.
以下更新条件有效:
(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2
我没有机会进一步测试它,如果有人可以评论这个特定问题,那就太好了。
接受的答案对我不起作用。这确实:
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
// you're at the bottom of the page
console.log("Bottom of page");
}
};
如果您希望支持较旧的浏览器 (IE9(,请使用别名window.pageYOffset
,它具有稍好的支持。
我正在寻找答案,但没有找到确切的答案。这是一个纯粹的javascript解决方案,可以与最新的Firefox,IE和Chrome一起使用:
// document.body.scrollTop alone should do the job but that actually works only in case of Chrome.
// With IE and Firefox it also works sometimes (seemingly with very simple pages where you have
// only a <pre> or something like that) but I don't know when. This hack seems to work always.
var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
// Grodriguez's fix for scrollHeight:
// accounting for cases where html/body are set to height:100%
var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;
// >= is needed because if the horizontal scrollbar is visible then window.innerHeight includes
// it and in that case the left side of the equation is somewhat greater.
var scrolledToBottom = (scrollTop + window.innerHeight) >= scrollHeight;
// As a bonus: how to scroll to the bottom programmatically by keeping the horizontal scrollpos:
// Since window.innerHeight includes the height of the horizontal scrollbar when it is visible
// the correct vertical scrollTop would be
// scrollHeight-window.innerHeight+sizeof(horizontal_scrollbar)
// Since we don't know the visibility/size of the horizontal scrollbar
// we scroll to scrollHeight that exceeds the value of the
// desired scrollTop but it seems to scroll to the bottom with all browsers
// without problems even when the horizontal scrollbar is visible.
var scrollLeft = (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft;
window.scrollTo(scrollLeft, scrollHeight);
这有效
window.onscroll = function() {
// @var int totalPageHeight
var totalPageHeight = document.body.scrollHeight;
// @var int scrollPoint
var scrollPoint = window.scrollY + window.innerHeight;
// check if we hit the bottom of the page
if(scrollPoint >= totalPageHeight)
{
console.log("at the bottom");
}
}
如果您希望支持较旧的浏览器(IE9(,请将window.scrollY替换为window.pageYOffset
如果您在某个容器<div id="wrapper">
上设置height: 100%
,则以下代码有效(在 Chrome 中测试(:
var wrapper = document.getElementById('wrapper');
wrapper.onscroll = function (evt) {
if (wrapper.scrollTop + window.innerHeight >= wrapper.scrollHeight) {
console.log('reached bottom!');
}
}
window.onscroll = function(ev) {
if ((window.innerHeight + Math.ceil(window.pageYOffset)) >= document.body.offsetHeight) {
alert("you're at the bottom of the page");
}
};
这个答案将修复边缘情况,这是因为pageYOffset
double
而innerHeight
和offsetHeight
long
,所以当浏览器给你信息时,你可能少了一个像素。例如:在页面底部,我们有
真window.innerHeight = 10.2
真window.pageYOffset = 5.4
真document.body.offsetHeight = 15.6
然后,我们的计算结果为:10 + 5.4>= 16 这是错误的
要解决此问题,我们可以对pageYOffset
值执行Math.ceil
。
希望有帮助。
如果你对其他人没有运气,试试这个方法。
window.onscroll = function() {
const difference = document.documentElement.scrollHeight - window.innerHeight;
const scrollposition = document.documentElement.scrollTop;
if (difference - scrollposition <= 2) {
alert("Bottom of Page!");
}
}
我刚刚开始研究这个,这里的答案对我有帮助,所以谢谢。我扩展了一点,以便代码一直安全回到IE7:
希望这对某人有用。
在这里,有一个小提琴;)
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
border-bottom: 1px solid #ddd;
}
div:nth-child(even) {
background: #CCC
}
div:nth-child(odd) {
background: #FFF
}
</style>
</head>
<body>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</body>
<script type="text/javascript">
console.log("Doc Height = " + document.body.offsetHeight);
console.log("win Height = " + document.documentElement.clientHeight);
window.onscroll = function (ev) {
var docHeight = document.body.offsetHeight;
docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;
var winheight = window.innerHeight;
winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;
var scrollpoint = window.scrollY;
scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;
if ((scrollpoint + winheight) >= docHeight) {
alert("you're at the bottom");
}
};
</script>
</html>
新的解决方案。
一个问题源于缺少标准的主滚动元素。最近实现的document.scrollingElement可以用来尝试克服这个问题。下面是一个带有回退功能的跨浏览器解决方案:
function atEnd() {
var c = [document.scrollingElement.scrollHeight, document.body.scrollHeight, document.body.offsetHeight].sort(function(a,b){return b-a}) // select longest candidate for scrollable length
return (window.innerHeight + window.scrollY + 2 >= c[0]) // compare with scroll position + some give
}
function scrolling() {
if (atEnd())
//do something
}
window.addEventListener('scroll', scrolling, {passive: true});
使用vanilla javascript的最简单方法
container.addEventListener('scroll', (e) => {
var element = e.target;
if (element.scrollHeight - element.scrollTop - element.clientHeight <= 0) {
console.log('scrolled to bottom');
}
});
$(document).ready(function(){
$('.NameOfYourDiv').on('scroll',chk_scroll);
});
function chk_scroll(e)
{
var elem = $(e.currentTarget);
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())
{
alert("scrolled to the bottom");
}
}
如果你喜欢jquery
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
// doSomethingHere();
}
});
使用嵌入功能代码片段的defaultView
和documentElement
:
const { defaultView } = document;
const { documentElement } = document;
const handler = evt => requestAnimationFrame(() => {
const hitBottom = (() => (defaultView.innerHeight + defaultView.pageYOffset) >= documentElement.offsetHeight)();
hitBottom
? console.log('yep')
: console.log('nope')
});
document.addEventListener('scroll', handler);
<pre style="height:110vh;background-color:fuchsia">scroll down</pre>
const handleScroll = () => {
if (Math.round(window.scrollY + window.innerHeight) >= Math.round(document.body.scrollHeight)) {
onScroll();
}
};
这段代码在Firefox和IE中也对我有用。
如上所述,代码可能无法在所有设备和浏览器上运行。以下是经过测试的工作代码,它将与所有浏览器(Chrome,IE,Edge,Firefox和Safari(中的所有主要设备(iPhone,Android,PC(兼容。
window.onscroll = function(ev) {
var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight );
if ((window.innerHeight + window.scrollY) >= pageHeight) {
console.log("You are at the bottom of the page.");
}
};
<html>
<body>
<div style="width:100%; height:1500px">
<p>Keep scrolling the page till end...</p>
</div>
</body>
</html>
我为移动设备和桌面制作了这个功能,它对我来说是有效的,这里的一些评论不适用于移动/Android设备,顺便说一句,谢谢你的这个问题。继续保持编码!
window.addEventListener("scroll", function(el) {
const scrollY = window.scrollY + window.innerHeight + 2;
const bodyScroll = document.body.offsetHeight;
console.log("Scroll Y : " + scrollY);
console.log("Body : " + bodyScroll);
if(scrollY >= bodyScroll){
alert("Bottom Page");
}
})
令人惊讶的是,没有一个解决方案对我有用。我认为这是因为我的css
搞砸了,而且body
在使用height: 100%
时没有包装所有内容(还不知道为什么(。然而,在寻找解决方案时,我想出了一些很好的东西......基本相同,但也许值得一看 - 我是编程新手,所以很抱歉,如果它做同样的事情慢,支持较少或类似的东西......
window.onscroll = function(evt) {
var check = (Element.getBoundingClientRect().bottom - window.innerHeight) <= 0;
if (check) { console.log("You're at the bottom!"); }
};
您可以检查窗口高度和滚动顶部的组合结果是否大于正文
if (window.innerHeight + window.scrollY >= document.body.scrollHeight) {}
我发现两个对我有用的解决方案:
window.addEventListener('scroll', function(e) {
if (
window.innerHeight + document.documentElement.scrollTop ===
document.documentElement.offsetHeight
) {
console.log('You are at the bottom')
}
})
另一个:
window.addEventListener('scroll', function(e) {
if (
window.innerHeight + window.pageYOffset ===
document.documentElement.offsetHeight
) {
console.log('You are at the bottom')
}
})
此检查对延迟加载的我有效
window.onscroll = () => {
if (Math.ceil(window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
alert('Bottom!');
}
};
这对我有用,请注意包括 Math.round(( 函数以将高度舍入到最接近的整数。
window.addEventListener('scroll', function(e) {
if (Math.round(window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
alert('bottom');
}
});
我只是在页面底部放置一个小图像,加载="lazy",这样浏览器只会在用户向下滚动时加载它。然后,图像会尝试一个 php 计数器脚本,该脚本返回一个真实的图像
<img loading="lazy" src="zaehler_seitenende.php?rand=<?=rand(1,1000);?>">
<?php
@header("Location: https://domain.de/4trpx.gif");
- 如何检测用户是否在同一会话中打开了多个窗口或选项卡
- 检查iframe内部的窗口是否已关闭
- 是否可以使用Jquery操作窗体的目标窗口
- 是否可以使用javascript获取以em为单位的窗口宽度
- 用javascript从窗口获取文档,同时检查文档是否已加载
- window.open:是否可以通过修改DOM来打开一个新窗口
- 是否可以从弹出窗口触发内容脚本中的行为
- 在Chrome扩展程序中,是否可以截屏并在弹出窗口中显示屏幕
- 是否可以模拟 qUnit 测试的窗口位置对象
- iframe是否可能在没有主窗口帮助的情况下自行调整大小
- 是否可以使用javascript激活windows应用程序窗口
- 是否可以使用JS打开具有所需内容类型的浏览器窗口
- 是否可以在Kendo网格中只显示来自Kendo数据源的某些字段,而在“;添加“;弹出窗口
- 是否可以打开一个新窗口并将iframe嵌入其中
- 确定是否在不使用任何全局变量的情况下加载了窗口
- jQuery:添加和删除<br>标签,这取决于窗口宽度以及标签是否已经存在
- 如何检查窗口是否已滚动到href,然后在javascript/jQuery中执行函数
- 检查窗口是否为弹出窗口的另一种方法
- 如何检测浏览器窗口是否已从另一个浏览器窗口打开
- 我想知道是否可以使用 node.js 在窗口之间发送数据