如何解决滚动显示元素上下-静态页面时隐藏元素不滚动
当用户滚动页面(上下滚动)时,我想使计算机鼠标的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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。