当前位置：网站首页>JS listens for page or element scroll events, scrolling to the bottom or top

JS listens for page or element scroll events, scrolling to the bottom or top

2022-06-24 23:33:00 【Pengshiyu】

Insert picture description here

The basic principle ：

1、 Scroll to the bottom 
 The rolling distance of elements  +  Visible distance of element  ==  Total scroll bar distance of the element 

2、 Scroll to top 
 The rolling distance of elements   == 0

Monitor page scrolling

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Scroll Demo</title>
  </head>

  <body>
    <style> .box {
       height: 5000px; text-align: center; } </style>

    <div class="box" id="box"> Open the console to see </div>

    <!--  Introduce the throttling method  -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/index.min.js"></script>

    <script> //  Scroll direction enumeration values  const DIRECTION_ENUM = {
       DOWN: "down", UP: "up", }; //  Threshold from top or bottom  const threshold = 20; //  Record the previous scroll position  let beforeScrollTop = 0; function handleScroll() {
       //  From the top  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //  Height of visual area  var clientHeight = document.documentElement.clientHeight || document.body.clientHeight; //  Total height of scroll bar  var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; //  Print values  console.table([ {
       label: " From the top ", value: scrollTop, }, {
       label: " Height of visual area ", value: clientHeight, }, {
       label: " Total height of scroll bar ", value: scrollHeight, }, {
       label: " From the top  +  Height of visual area ", value: scrollTop + clientHeight, }, ]); //  Determine the scroll direction  let direction = DIRECTION_ENUM.DOWN; if (beforeScrollTop > scrollTop) {
       direction = DIRECTION_ENUM.UP; } //  Judge whether to touch the bottom or the top by the rolling direction  if (direction == DIRECTION_ENUM.DOWN) {
       //  Roll to the bottom  if (scrollTop + clientHeight + threshold >= scrollHeight) {
       console.log(" Roll to the bottom "); } } else {
       //  Scroll to top  if (scrollTop <= threshold) {
       console.log(" Scroll to top "); } } beforeScrollTop = scrollTop; } //  Rolling throttle  const throttleHandleScroll = throttleDebounce.throttle( 1000, handleScroll ); //  Monitor rolling  window.addEventListener('scroll', throttleHandleScroll); </script>
  </body>
</html>

Empathy , You can also listen for element scrolling

<style> .box-wrap {
       height: 500px; overflow-y: auto; } .box {
       height: 5000px; text-align: center; } </style>

<div class="box-wrap" id="box">
  <div class="box"> Open the console to see </div>
</div>

<script> //  Monitor rolling  let box = document.querySelector("#box"); box.addEventListener("scroll", function (e) {
       let scrollTop = e.target.scrollTop; let clientHeight = e.target.clientHeight; let scrollHeight = e.target.scrollHeight; //  Print values  console.table([ {
       label: " From the top ", value: scrollTop, }, {
       label: " Height of visual area ", value: clientHeight, }, {
       label: " Total height of scroll bar ", value: scrollHeight, }, {
       label: " From the top  +  Height of visual area ", value: scrollTop + clientHeight, }, ]); }); </script>

Points needing attention when judging the bottom ：

When scrolling, you need to distinguish between scrolling up or down
You can set a threshold when scrolling , It doesn't trigger until it reaches the bottom or top completely
Rolling events require throttling , To avoid being triggered many times in a short time

On-line Demo