滚动显示元素上下-静态页面时隐藏元素不滚动

问题描述

当用户滚动页面（上下滚动）时，我想使计算机鼠标的svg图像出现在视口的底部。当页面是静态的（无滚动）时，我希望元素被隐藏。与浏览器右侧滚动条的效果相同。是否可以将此效果应用于html元素？非常感谢您的提前帮助。

解决方法

这可以通过侦听“滚动”事件window.addEventListener('scroll',someFunction)来实现。

我们可以通过将div的显示样式从“无”更改为“阻止” box.style.display = 'block'来显示div。

并设置一个超时值，该超时值将在五秒钟内调用另一个函数来再次隐藏div setTimeout(hideBox,5000)。

您可以在Mozilla文档中找到所有这些功能的定义和说明：https://developer.mozilla.org/en-US/

我还提供了一个简单但可行的示例：

(function () {
  let timeoutHandle = 0;
  const box = document.getElementById("box");

  // add the scroll event
  window.addEventListener("scroll",(e) => {
    box.style.display = "block";
    clearTimeout(timeoutHandle);
    // call function to hide box after 5 seconds
    timeoutHandle = setTimeout(hideBox,5000);
  });

  // hides box by setting display to 'none'
  hideBox = () => {
    box.style.display = "none";
  };
})();

#box {
  position: fixed;
  bottom: 2px;
  right: 2px;
  line-height: 95px;
  height: 100px;
  width: 100px;
  border: 3px solid red;
  text-align: center;
  display: none;
}

#box p {
  display: inline-block;
  vertical-align: middle;
}

<div>
  <a id="top">
    <!-- hidden anchor --></a>
  <p> This is just some sample text.</p>
  <p> You should pay attention to the tiny box at the bottom right corner. It appears when you scroll.</p>
  <p> Now we add a very long image to make scrolling possible.</p>
  <img src="https://i.pinimg.com/564x/75/b7/8a/75b78ae86b6f81ed20f41f57e2a3a7f2.jpg">
</div>

<div id="box">
  <a href="#top">jump top</a>
</div>