Lenis Smooth Scroll是前端开发中常用的平滑滚动工具，能够实现流畅的页面滚动效果，但部分场景下会出现页面底部滚动受限的问题，导致底部内容无法完全展示，影响用户体验。
问题常见表现与成因
底部滚动受限的典型表现有两种：一是滚动到页面底部时，鼠标滚轮或触摸滑动无法继续触发，底部还有内容但无法滚动到可视区域；二是页面底部内容被截断，部分元素始终无法进入视口。常见成因包括以下几点：
- Lenis初始化时未正确设置滚动容器的边界参数，导致计算的可滚动高度小于实际页面高度
- 页面存在动态加载的内容，Lenis初始化时未获取到最新的页面高度，滚动范围没有同步更新
- 页面布局中设置了固定的底部内边距或者容器高度限制，压缩了实际可滚动区域
- Lenis的平滑滚动动画参数设置不合理，导致滚动到边界时出现卡顿或提前停止
优化方案与代码实现
1. 调整Lenis初始化参数
首先需要确认Lenis的初始化配置中，wrapper和content参数是否正确指向滚动容器和页面内容容器，同时开启边界检测相关配置。以下是基础的正确初始化示例：
// 初始化Lenis实例
const lenis = new Lenis({
wrapper: document.documentElement, // 滚动容器，默认是html元素
content: document.documentElement, // 内容容器，默认是body元素
duration: 1.2, // 滚动动画时长
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // 缓动函数
smooth: true, // 开启平滑滚动
direction: 'vertical', // 垂直滚动
gestureDirection: 'vertical',
smoothTouch: false,
touchMultiplier: 2,
// 开启边界检测，避免滚动超出实际范围
infinite: false,
// 允许滚动到容器的最底部
allowSmoothScrollOnTouch: true
})
// 启动Lenis的滚动更新循环
function raf(time) {
lenis.raf(time)
requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
2. 动态更新滚动高度
如果页面存在动态加载的内容，需要在内容加载完成后调用Lenis的resize方法更新滚动范围，避免初始化时的高度计算不准确：
// 模拟动态加载底部内容
function loadMoreContent() {
const contentContainer = document.querySelector('.page-content')
const newContent = document.createElement('div')
newContent.className = 'bottom-section'
newContent.innerHTML = '<p>这是动态加载的底部内容</p>'
contentContainer.appendChild(newContent)
// 内容加载完成后更新Lenis的滚动计算
lenis.resize()
}
// 假设点击按钮触发加载
document.querySelector('.load-btn').addEventListener('click', loadMoreContent)
3. 修正页面布局参数
检查CSS中是否存在不合理的布局设置，比如给body或html设置了固定的height或者overflow限制，以下是推荐的页面基础布局样式：
/* 避免给html和body设置固定高度，保证内容可以正常撑开 */
html, body {
margin: 0;
padding: 0;
/* 不要设置height: 100%，会导致内容超出时被截断 */
overflow-x: hidden;
}
.page-content {
min-height: 100vh;
/* 底部预留合理的padding，避免内容和浏览器工具栏重叠 */
padding-bottom: 20px;
}
4. 处理边界滚动事件
如果仍然存在底部滚动卡顿的问题，可以监听Lenis的滚动事件，手动修正边界滚动逻辑：
// 监听滚动事件，检测是否到达底部
lenis.on('scroll', (e) => {
// 获取当前滚动位置、页面总高度、视口高度
const scrollTop = e.scroll
const scrollHeight = document.documentElement.scrollHeight
const clientHeight = document.documentElement.clientHeight
// 如果已经滚动到距离底部10px以内，且还有剩余内容，手动触发修正
if (scrollHeight - scrollTop - clientHeight < 10) {
// 强制更新滚动参数
lenis.resize()
}
})
验证优化效果
完成上述配置后，可以通过以下方式验证问题是否解决：
- 滚动页面到最底部，检查所有内容是否都能进入可视区域
- 动态加载内容后，再次滚动到底部，确认新加载的内容可以正常展示
- 调整浏览器窗口大小，测试响应式布局下底部滚动是否正常
如果问题仍然存在，可以检查是否有其他全局的滚动监听事件干扰了Lenis的正常工作，或者尝试降低Lenis的动画时长参数，减少动画带来的边界计算误差。
Lenis_Smooth_Scroll平滑滚动页面滚动优化滚动受限修改时间：2026-06-18 21:51:40