document.querySelector( "html" ).scrollTop 返回零，即使视图不在页面顶部

Question

我想在用户点击向上/向下箭头键时滚动页面。即使页面视图不完全位于顶部，document.querySelector("html").scrollTop也返回0。这是在chrome浏览器上，

是否有其他方法可以获得页面当前的精确高度位置?

Answer 1

检查HTML的css属性。如果它的属性是overflow: hidden，那么它将不起作用。

尝试滚动另一个元素，如body,div等

let scrollTopBtn = document.getElementById("scrollTop");
let scrollBottomBtn = document.getElementById("scrollBottom");
let scrollDiv = document.querySelector(".scrollable-div");
function scrollTo(elem, scrollValue) {
elem.scrollTop += scrollValue;
}
scrollTopBtn.addEventListener("click", function(){
scrollTo(scrollDiv, -35);
});
scrollBottomBtn.addEventListener("click", function(){
scrollTo(scrollDiv, 35);
});

div.scrollable-div{
position: relative;
height: 250px;
width: 100%;
color: #fff;
padding: 5px;
font-family: sans-serif;
background-color: #222;
overflow: scroll; /*important for scrolling*/
scroll-behavior: smooth;
}
button{
position: relative;
display: block;
border: none;
margin-top: 5px;
}

<button id="scrollTop">Scroll Top</button>
<button id="scrollBottom">Scroll Bottom</button>
<div class="scrollable-div">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
Hope this helps!