How to use javascript to execute a function when the mouse is down

Question

I want to practice the effect of executing functions when doing mouse scrolling.

I have a difficulty and I want to ask for your help! Currently I have a screen when I want to scroll down when the mouse is scrolled. You can open the load screen, the default is display: none; only when the mouse is scrolled down, javascript will be triggered to open the load screen, I hope that the function will be executed as long as the mouse is down, but not when the mouse is up Function.

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>

What exactly do you mean by *mouse is down* and *mouse is up*? — DecPK, Aug 18 '21 at 02:30
Sorry~ because my English is not clear enough~! I hope that when the mouse uses the scroll wheel to go down, the javascript function can be triggered to open the load screen~ — WEI A, Aug 18 '21 at 02:31
Does this answer your question? [Capturing the "scroll down" event?](https://stackoverflow.com/questions/4670834/capturing-the-scroll-down-event) — MVB76, Aug 18 '21 at 02:41

score 1 · Accepted Answer · answered Aug 18 '21 at 03:01

you need to add a scroll event listener to the ul.demo element. Then when scrolling, compare the scrollTop of it to the last known position. If it is greater than the last known position, then you are scrolling down. If it is less than the last known position, you are scrolling up.

See more info here: https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event

let lastKnownScrollPosition = 0;
const ul = document.querySelector('.demo')

ul.addEventListener('scroll', function(e) {
  const el = document.querySelector('.load')
  const currentScrollPosition = e.target.scrollTop;
  if (currentScrollPosition > lastKnownScrollPosition) {
    el.style.display = 'block';
  } else {
    el.style.display = 'none';
  }
  lastKnownScrollPosition = currentScrollPosition;
});


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

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

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

.load {
  position: absolute;
  top: 50px;
  left: 125px;
  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>

How to use javascript to execute a function when the mouse is down

1 Answers1