How do I tell when the top or bottom of an element scrolls to the top of the page using vanilla javascript
Question
I have a web page with two 100% height divs like this...
<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...
<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 answers
solution1
1 2020-12-01 17:52:13
You can use getBoundingClientRect() . It gives you the DOMRect object containing the size and coordinates of an element.
... 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.
solution2
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.
// 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.