有没有办法使用JavaScript检查页面是否在scroll(0,0)
位置?
原因是我有一个全屏幕滑动效果,需要在页面不处于初始化位置时立即暂停。
这可能并非由于页面正在实时滚动,而是因为我有内部HTML #链接,可以直接将页面加载到滚动的位置,而不需要实际滚动。
因此,需要检查页面是否不在顶部,而不是已经被滚动了多少。
有没有办法使用JavaScript检查页面是否在scroll(0,0)
位置?
原因是我有一个全屏幕滑动效果,需要在页面不处于初始化位置时立即暂停。
这可能并非由于页面正在实时滚动,而是因为我有内部HTML #链接,可以直接将页面加载到滚动的位置,而不需要实际滚动。
因此,需要检查页面是否不在顶部,而不是已经被滚动了多少。
window.scrollY
(窗口已垂直滚动的像素数)是否等于0
。如果您想要检查窗口是否已水平滚动到最左侧,可以检查window.scrollX
(窗口已水平滚动的像素数)是否等于0
。如果您将两者结合使用,则可以确保窗口位于(0,0)位置。if(window.scrollY==0){
//user scrolled to the top of the page
}
if(window.scrollX==0){
//user scrolled to the leftmost part of the page
}
if(window.scrollY==0&&window.scrollX==0){
//user scrolled to the leftmost part of the top of the page—i.e., they are at position (0, 0)
}
演示:
var goToTop = document.querySelector('#backToTop');
goToTop.addEventListener("click", function(e){
window.scroll({top: 0, left: 0, behavior: 'smooth'});
//scroll smoothly back to the top of the page
});
window.addEventListener("scroll", function(){
if(window.scrollY==0){
//user is at the top of the page; no need to show the back to top button
goToTop.style.display = "";
} else {
goToTop.style.display = "block";
}
});
body,html{height:3000px;position:relative;margin:0}#footer{position:absolute;width:100%;bottom:0;left:0;right:0;background-color:#1e90ff;text-align:center}#backToTop{position:fixed;right:0;bottom:0;display:none;z-index:1}#header{position:absolute;width:100%;top:0;left:0;right:0;background-color:#1e90ff;text-align:center}
<div id="header">Header</div>
<button id="backToTop">Back To Top</button>
<div id="footer">Footer</div>
window.pageYOffset
代替window.scrollY
,并使用window.pageXOffset
代替window.scrollX
。var x = (window.pageXOffset !== undefined)
? window.pageXOffset
: (document.documentElement || document.body.parentNode || document.body).scrollLeft;
//number of pixels scrolled horizontally (work with this value instead of window.scrollX or window.pageXOffset)
var y = (window.pageYOffset !== undefined)
? window.pageYOffset
: (document.documentElement || document.body.parentNode || document.body).scrollTop;
//number of pixels scrolled vertically (work with this value instead of window.scrollY or window.pageYOffset)
试试这个:
document.body.scrollTop === 0
window.scrollY
- PP Laru2019年更新答案
document.body.scrollTop已经被废弃,在Chrome浏览器中已经不再起作用。最好的解决方法是同时考虑三种可能性,以实现跨浏览器的解决方案。
!window.pageYOffset
以下三种方法适用于所有浏览器类型。如果值等于0,则表示您在视口顶部。
$(window).scrollTop()
来获取位置。
window.scrollX
和window.scrollY
只能返回数字值;因此,即使使用if(!window.scrollY)console.log('scrolled to top');
也可以,尽管可读性较差。 - Unmitigated