How to use javascript to detect when the mouse scrolls to the bottom will trigger an event?

Question

I am new to javascript, and I have encountered difficulties and hope to get your help! My English is not good, but I try to describe my problem completely!

I hope the load() function can be triggered when the mouse scrolls to the bottom , How can the load() event be triggered when the mouse scrolls to the bottom?

Thank you for your help~

function show(){
  let scrollposition = 0;
  const el = document.querySelector('.demo');
  el.addEventListener('scroll',function(e){
    console.log('123');
       load();
      // let a = el.target.scrollTop;
      // let b = el.target.innerHeight;
      // let c = el.target.scrollHeight;
      // if(currentscrollposition + windows >= total){
      //       console.log('bottom');
      // }
  })
}

show();

function load(){
  let el = document.querySelector('.load');
  el.style.display = 'block';
}
// // load()

.demo{
  width: 200px;
  height: 300px;
  overflow-y:scroll;
  background-color: #fff;
}


.item{
  list-style:none;
  padding:20px;
  border:1px solid #ccc;
}

.load{
  width:100%;
  margin: 0 auto;
  display: none;
}

<ul class="demo">
    <li   class="item">article1</li>
    <li  class="item">article2</li>
    <li  class="item">article3</li>
    <li  class="item">article4</li>
    <li  class="item">article5</li>
    <li  class="item">article6</li>
    <li  class="item">article7</li>
    <li  class="item">article8</li>
    <li  class="item">article9</li>
    <li  class="item">article10</li>
<!--  load -->
   <svg class="load" version="1.1" id="loader-1"  x="0px" y="0px"
        width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
        <animateTransform attributeType="xml"
        attributeName="transform"
        type="rotate"
        from="0 25 25"
        to="360 25 25"
        dur="0.6s"
        repeatCount="indefinite"/>
    </path>
  </svg>
</ul>

Maybe this will help you? https://stackoverflow.com/questions/3898130/check-if-a-user-has-scrolled-to-the-bottom/3898152. Check the pure JS solution instead of the JQuery if you wish so. — Siddharth Bhansali, Aug 18 '21 at 05:51

score 3 · Answer 1 · answered Aug 18 '21 at 06:11

I hope it helps you:

var currPos = window.scrollY;
document.addEventListener('scroll', () => {
  if (window.scrollY < currPos) {
  //scroll up
    console.log('Scroll Up');
  } else {
  //scroll down
    console.log('Scroll Down');
  }
  currPos = window.scrollY;
});

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
      <header>Header</header>
      <main>
        <ol>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
          <li>List Element</li>
        </ol>
      </main>
  <footer>Footer</footer>
  </body>
</html>

score 1 · Accepted Answer · answered Aug 18 '21 at 07:14

If you want to call a function when scroll get the bottom of the list you should get the position of the last child and scroll position and when scroll reach the last child then call the function.

function show() {
  let scrollposition = 0;
  const ul = document.querySelector('.demo');
  ul.addEventListener('scroll', function(e) {
    var li = ul.children[ul.children.length - 2];
    if (ul.scrollTop + ul.offsetHeight > li.offsetTop) {
      document.getElementById('loading').innerHTML = "loading...";
      load();
    }
    else{
      document.getElementById('loading').innerHTML = "";
    }
  })
}

show();

function load() {
  let el = document.querySelector('.load');
  el.style.display = 'block';
}
// // load()

#loading {
  width: 100px;
  float: right;
}

.demo {
  width: 200px;
  height: 300px;
  overflow-y: scroll;
  background-color: #fff;
}

.item {
  list-style: none;
  padding: 20px;
  border: 1px solid #ccc;
}

.load {
  width: 100%;
  margin: 0 auto;
  display: none;
}

<div id="loading">
</div>
<ul id="demo" class="demo">
  <li class="item">article1</li>
  <li class="item">article2</li>
  <li class="item">article3</li>
  <li class="item">article4</li>
  <li class="item">article5</li>
  <li class="item">article6</li>
  <li class="item">article7</li>
  <li class="item">article8</li>
  <li class="item">article9</li>
  <li class="item">article10</li>
  <!--  load -->
  <svg class="load" version="1.1" id="loader-1" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
        <animateTransform attributeType="xml"
        attributeName="transform"
        type="rotate"
        from="0 25 25"
        to="360 25 25"
        dur="0.6s"
        repeatCount="indefinite"/>
    </path>
  </svg>
</ul>

How to use javascript to detect when the mouse scrolls to the bottom will trigger an event?

2 Answers2