如果页面在scroll(0,0)
**?** scroll(0,0)
**?**上,有没有办法用JavaScript检查页面
原因是我有一个完整的页面滑块,我需要暂停的第二个页面不在原点。
这可能不一定是因为页面是实时滚动的,因为我有内部HTML #链接,这些链接会将页面加载到滚动点,而不是实际滚动。
因此,需要检查的是页面不在顶部,而不是页面是否滚动过。
发布于 2011-11-22 04:35:16
试试这个:
document.body.scrollTop === 0
发布于 2018-08-06 07:27:20
您可以检查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
。
在需要浏览器完全兼容的情况下(即IE <9),可以使用以下代码:
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)
发布于 2019-06-10 22:19:32
2019年的更新答案
document.body.scrollTop已被弃用,在Chrome中完全不起作用。解决这个问题的最好方法是简单地查看所有三种可能性,以获得一个跨浏览器的解决方案。
!window.pageYOffset
这三种方法中的一种应该适用于所有类型的浏览器。如果该值等于0,则表示位于视口顶部。
https://stackoverflow.com/questions/8218159
复制相似问题