scrollscrollTopclientHeightscrollHeight
:scroll
:
<style>
-sharpcontainer {
height: 200px;
overflow-x: hidden;
}
.ele {
height: 50px;
width: 100%;
}
</style>
<script>
let container = document.getElementById("container");
container.onscroll = () => {
if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
console.log("reached!");
}
}
</script>
<!-- scroll -->
<div id="container">
<div class="ele">item1</div>
<div class="ele">item2</div>
<div class="ele">item3</div>
<div class="ele">item4</div>
</div>
<!-- scroll -->
<div id="container">
<div class="ele">item1</div>
<div class="ele">item2</div>
<div class="ele">item3</div>
<div class="ele">item4</div>
<div class="ele">item5</div>
</div>