本文探讨lenis平滑滚动库在动态内容加载后无法滚动至页面底部的问题。核心原因在于lenis初始化过早，未能正确识别完整的dom高度。解决方案是利用$(document).ready()确保在所有页面元素加载完毕后，先停止并随后重新启动lenis，从而使其能准确计算并适应最终的页面布局，恢复流畅的滚动体验。
Lenis是一个流行的JavaScript库，用于为网页提供流畅的平滑滚动体验。然而，在某些复杂的网页环境中，尤其是在使用Webflow这类内容管理系统（CMS）或涉及大量动态加载内容的网站上，开发者可能会遇到一个常见问题：页面无法滚动到最底部。用户可能会发现，在页面加载完成后，滚动条似乎在某个点戛然而止，无法触及页面的最底端内容。一个有趣的现象是，当用户手动调整浏览器窗口大小时，滚动功能又会瞬间恢复正常，允许滚动到页面底部。这表明问题并非出在滚动功能本身，而是与页面的布局计算或初始化时机有关。
导致Lenis无法滚动到页面底部的核心原因在于其初始化时机。在许多现代前端开发实践中，页面内容并非一次性完全加载。例如，Webflow的CMS内容、懒加载的图片、第三方组件（如Swiper滑块）、或者通过JavaScript动态注入的内容，都可能在初始DOM加载完成后才呈现。
当Lenis在这些动态内容尚未完全加载和渲染之前就完成初始化时，它会基于当时不完整的DOM结构来计算页面的总高度和可滚动区域。一旦后续内容加载并扩展了页面的实际高度，Lenis的内部计算值就不会自动更新，导致其认为页面已经“到底”了，从而限制了实际的滚动范围。当用户调整窗口大小时，浏览器通常会触发重绘和重新布局，这可能间接促使Lenis重新计算页面高度，从而暂时解决了问题。
要彻底解决这个问题，关键在于确保Lenis在所有页面内容（包括动态加载的部分）都已完全呈现并稳定后，再进行工作。这可以通过延迟Lenis的启动时机来实现。具体策略是：在页面初始加载时，先停止Lenis的滚动行为；然后，等待整个文档对象模型（DOM）完全加载并准备就绪后，再重新启动Lenis。这样，Lenis就能基于最终的、完整的页面高度进行准确的计算。
通常，您会在页面的某个脚本块中初始化Lenis，其基本代码结构如下：
// Lenis基础初始化代码
const lenis = new Lenis()
lenis.on('scroll', (e) => {
console.log(e)
})
function raf(time) {
lenis.raf(time)
requestAnimationFrame(raf)
}
requestAnimationFrame(raf)为了解决滚动受限问题，我们需要对上述初始化过程进行优化。在您的Webflow项目（或其他任何HTML项目）中，请确保上述Lenis初始化代码已经存在。然后，在您页面的全局代码区域（通常是
以上就是优化Lenis Smooth Scroll：解决页面底部滚动受限问题的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
343
收藏
取消收藏
