前言
我们相拥在丝线交织的殿堂, 这看似简单的一次见面, 却仿佛在诉说着离别. 人海茫茫, 又有谁能在时间的洪流中真正驻留? 时间会带走一切,
唯有这片刻的温暖，能在湍流中短暂停留. 让我化作无形却温存的痕迹, 轻轻落在你的回忆里.
逻辑解析
[vScroll]&[content]->[main] : 虚列表和实际列表内容同时存在于一个父布局, 虚列表提供实际滚动距离, 实际列表负责显示内容, 父布局为视口
父布局 : 负责限制两个子元素的位置于大小, 整体位置
实际列表 : 提供实际内容但不显示滚动条, 受控元素
虚列表 : 监听实际滚动位置, 显示滚动条, 数据来源
CSS
.main {
height: 100vh;
overflow: hidden;
}
.content {
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.vscroll {
position: absolute;
width: 100%;
height: 100vh;
overflow: auto;
}
.vscroll div {
/* 需要计算列表高度实际值 */
height: 100vh;
}
JavaScript
const UI_CONTENT = document.querySelector('.content');
document.getElementById('vscroll').style.height = `${document.querySelector('.calendar').offsetHeight}px`;
document.querySelector('.vscroll').onscroll = (e) => {
UI_CONTENT.style.transform = `translateY(-${e.currentTarget.scrollTop}px)`;
}
HTML
<div class="main">
<div class="content">
/* 此处为列表内容 */
</div>
<div class="vscroll"><div id="vscroll"></div></div>
</div>
本站资源仅供用于学习和交流，请遵循相关法律法规。 本站一切资源不代表本站立场，如有侵权、违规、不妥请联系本站删除，敬请谅解。