CODEWITHSUNDEEP
javascriptcss
WEI A
WEI A

Reputation: 401

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

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>

Upvotes: 0

Views: 65

Answers (2)

Ahmad
Ahmad

Reputation: 884

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>

Upvotes: 1

Krzysztof Antosik
Krzysztof Antosik

Reputation: 993

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>

Upvotes: 3

Related Questions