当用户滚动页面(上下滚动)时,我想使计算机鼠标的svg图像出现在视口的底部。当页面是静态的(无滚动)时,我希望元素被隐藏。与浏览器右侧滚动条的效果相同。是否可以将此效果应用于html元素?非常感谢您的提前帮助。
答案 0 :(得分:0)
这可以通过侦听“滚动”事件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>