在移动设备上，当前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');
        }
    });
});