当一个div滚动出屏幕时,显示另一个div的效果可以通过监听滚动事件来实现。具体步骤如下:
以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
height: 500px;
width: 100%;
background-color: #f1f1f1;
overflow-y: scroll;
}
#div2 {
height: 200px;
width: 100%;
background-color: #ccc;
display: none;
}
</style>
</head>
<body>
<div id="div1" onscroll="checkScroll()">
<p>Scroll down to see the effect</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nunc id lacinia tristique, nisl justo efficitur nunc, a sollicitudin lorem tortor id mi. Sed euismod, massa sit amet efficitur lacinia, neque nunc aliquet nunc, id aliquam justo neque at erat. Nulla facilisi. Sed id semper mauris. Nullam auctor, nunc id lacinia tristique, nisl justo efficitur nunc, a sollicitudin lorem tortor id mi. Sed euismod, massa sit amet efficitur lacinia, neque nunc aliquet nunc, id aliquam justo neque at erat. Nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nunc id lacinia tristique, nisl justo efficitur nunc, a sollicitudin lorem tortor id mi. Sed euismod, massa sit amet efficitur lacinia, neque nunc aliquet nunc, id aliquam justo neque at erat. Nulla facilisi. Sed id semper mauris. Nullam auctor, nunc id lacinia tristique, nisl justo efficitur nunc, a sollicitudin lorem tortor id mi. Sed euismod, massa sit amet efficitur lacinia, neque nunc aliquet nunc, id aliquam justo neque at erat. Nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nunc id lacinia tristique, nisl justo efficitur nunc, a sollicitudin lorem tortor id mi. Sed euismod, massa sit amet efficitur lacinia, neque nunc aliquet nunc, id aliquam justo neque at erat. Nulla facilisi. Sed id semper mauris. Nullam auctor, nunc id lacinia tristique, nisl justo efficitur nunc, a sollicitudin lorem tortor id mi. Sed euismod, massa sit amet efficitur lacinia, neque nunc aliquet nunc, id aliquam justo neque at erat. Nulla facilisi.</p>
</div>
<div id="div2">
<p>This is the div to be shown when the other div is scrolled out of the screen.</p>
</div>
<script>
function checkScroll() {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var rect = div1.getBoundingClientRect();
if (rect.bottom <= 0 || rect.top >= window.innerHeight) {
div2.style.display = "block";
} else {
div2.style.display = "none";
}
}
</script>
</body>
</html>
在上述示例代码中,当div1
滚动出屏幕时,div2
会显示出来。你可以根据实际需求修改div1
和div2
的样式和内容。
请注意,以上示例代码中没有提及任何特定的云计算品牌商或产品,因为这个问题与云计算领域的专业知识没有直接关联。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云