鼠标按下时如何使用javascript执行功能[关闭]

Question

我想练习一下鼠标滚动时执行函数的效果。

我有一个困难，我想寻求你的帮助！目前，当我想在鼠标滚动时向下滚动时，我有一个屏幕。可以打开加载画面，默认是display：none； 只有当鼠标向下滚动时才会触发javascript打开加载画面，我希望只要鼠标向下就执行函数，而不是鼠标向上时函数。

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>

Answer 1

您需要为ul.demo 元素添加一个滚动事件侦听器。然后在滚动时，将它的 scrollTop 与最后一个已知位置进行比较。如果它大于最后一个已知位置，那么您正在向下滚动。如果它小于最后一个已知位置，则您正在向上滚动。

在此处查看更多信息：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>