如何使用 vanilla javascript 判断元素的顶部或底部何时滚动到页面顶部
[英]How do I tell when the top or bottom of an element scrolls to the top of the page using vanilla javascript
问题描述
I have a web page with two 100% height divs like this...
我有一个 web 页面，其中有两个像这样的 100% 高度 div...
<style>
html, body{
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
#wrapper{
height:100%;
width:100%;
overflow: auto;
}
.scroll-item{
height: 100%;
width: 100%;
}
</style>
...
<body>
<div id="wrapper">
<div id="test1"
class="scroll-item">Simple Test 1</div>
<div id="test2"
class="scroll-item">Simple Test 2</div>
</div>
</body>
Now I want to "select" the one that is currently scrolled to.现在我想“选择”当前滚动到的那个。 This means that the top of the element has reached the top of the browser but the bottom has not.这意味着元素的顶部已经到达浏览器的顶部，但底部没有。 This is where I am getting confused here is the JS...这就是我感到困惑的地方，这里是 JS ......
<script type="module">
const body = document.getElementsByTagName("body")[0];
const handleScroll = function(info){
const items = body.getElementsByClassName("scroll-item");
for(let i = 0; i < length; i++){
const item = items[i];
// TODO How do I tell if it is there
}
}
body.addEventListener("wheel",handleScroll);
</script>
I have tried using the bounding box but I cannot figure out how to get that to work correctly.我试过使用边界框，但我不知道如何让它正常工作。
How do I tell when the top or bottom of the element reaches the top of the browser (given possible offset for navbar)?我如何判断元素的顶部或底部何时到达浏览器的顶部（给定导航栏的可能偏移量）？
2 个解决方案
解决方案1
1 2020-12-01 17:52:13
You can use getBoundingClientRect() .您可以使用getBoundingClientRect() 。 It gives you the DOMRect object containing the size and coordinates of an element.它为您提供包含元素大小和坐标的DOMRect object。
... if (item.getBoundingClientRect().top < 0) { // items top has reached beyond window top } if (item.getBoundingClientRect().bottom > window.innerHeight) { // items bottom is beyond window bottom }...
For advanced usage, see IntersectionObserver , which detects an elements visibility inside the viewport.有关高级用法，请参阅IntersectionObserver ，它检测视口内的元素可见性。
解决方案2
1 2020-12-01 18:07:21
Use the wrapper to get current position and listen scroll event, also, is better to listen scroll instead of wheel event.使用包装器获取当前的 position 并监听滚动事件，另外，最好监听滚动而不是滚轮事件。
// Use the wrapper to get and listen scroll const wrapper = document.querySelector('#wrapper') const handleScroll = function(event) { const top = wrapper.scrollTop; document.querySelectorAll('.scroll-item').forEach((item, index) => { // Calculate item bottom position const bottom = item.offsetTop + item.offsetHeight; // Is the scroll between item top and bottom? if(top >= item.offsetTop && top < bottom) { console.log(`Item ${index} is active`); } }); } // scroll event is more accurate than wheel wrapper.addEventListener("scroll", handleScroll); html, body{ height: 100%; width: 100%; margin: 0; overflow: hidden; } #wrapper{ height:100%; width:100%; overflow: auto; }.scroll-item{ height: 100%; width: 100%; }
<body> <div id="wrapper"> <div id="test1" class="scroll-item">Simple Test 1</div> <div id="test2" class="scroll-item">Simple Test 2</div> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.