在移动设备上,当页面内容滚动到某个位置时,通常会触发一些视觉上的变化,比如隐藏或显示某些元素。这种机制通常用于优化用户体验,尤其是在有限的屏幕空间内。
假设你希望在移动设备上,当前4行隐藏时,停止显示第5行的顶部。可以通过以下步骤实现:
<div class="content">
<div class="line">Line 1</div>
<div class="line">Line 2</div>
<div class="line">Line 3</div>
<div class="line">Line 4</div>
<div class="line">Line 5</div>
<!-- 其他内容 -->
</div>
.content {
overflow-y: auto;
height: 100vh; /* 视口高度 */
}
.line {
height: 50px; /* 每行的高度 */
}
document.addEventListener('DOMContentLoaded', function() {
const content = document.querySelector('.content');
const lines = document.querySelectorAll('.line');
const lineHeight = 50; // 每行的高度
const visibleLines = 4; // 可见行数
content.addEventListener('scroll', function() {
const scrollTop = content.scrollTop;
const maxScroll = (lines.length - visibleLines) * lineHeight;
if (scrollTop >= maxScroll) {
lines[visibleLines - 1].style.display = 'none';
} else {
lines.forEach(line => line.style.display = 'block');
}
});
});
通过上述方法,你可以实现当当前4行隐藏时,停止显示第5行的顶部。这种方法不仅适用于移动设备,也可以扩展到桌面浏览器中。
领取专属 10元无门槛券
手把手带您无忧上云