lenis平滑滚动在webflow等动态内容网站中可能因初始化时机过早，导致无法滚动至页面底部。核心问题在于lenis计算页面高度时部分内容尚未加载完成。解决方案是在lenis初始化后立即停止，并在文档完全加载完毕（dom ready）时再重新启动lenis，确保其能正确计算完整的页面高度。
问题分析：Lenis滚动计算的挑战
在使用Lenis等平滑滚动库时，一个常见的问题是页面无法滚动到最底部。这通常发生在页面包含动态加载内容（如Webflow cms数据、Swiper滑块、图片懒加载、或通过JavaScript异步渲染的组件）时。Lenis在初始化时会根据当前DOM结构计算页面的总高度和可滚动区域。如果此时部分内容尚未加载或渲染完成，Lenis就会基于一个“不完整”的页面高度进行计算，导致后续即使内容加载完毕，滚动条也无法到达实际的页面底部。
例如，当Webflow项目中的CMS内容、Swiper滑块或大型图片在Lenis初始化之后才被注入或计算高度时，Lenis最初的滚动限制（scrollLimit）将低于实际需求。这种情况下，用户可能会发现只有在窗口大小调整（这通常会触发Lenis重新计算）后，滚动功能才能恢复正常。
解决方案：优化Lenis的初始化时机
解决此问题的核心在于确保Lenis在所有影响页面高度的元素都已加载并渲染完毕后，才开始其正常的滚动监听和计算。一种有效的策略是：在Lenis初始化后立即将其停止，然后等待文档的DOM结构完全加载和准备就绪后，再重新启动Lenis。
Webflow集成示例
以下代码展示了如何在Webflow项目中应用此解决方案。通常，这些脚本会放置在Webflow项目的“自定义代码”设置中，位于 </body> 标签之前。
首先，确保你的Lenis基础初始化代码存在：
// Lenis 基础初始化代码 // 这部分代码通常会放在页面的 <head> 或 <body> 标签底部 const lenis = new Lenis(); lenis.on('scroll', (e) => { // 可选：用于调试，观察滚动事件数据 // console.log(e); }); function raf(time) { lenis.raf(time); requestAnimationFrame(raf); } requestAnimationFrame(raf);
接着，添加优化Lenis启动时机的代码：
// 解决Lenis无法滚动到底部问题的关键优化代码 // 1. 立即停止Lenis // 这样做是为了防止Lenis在页面内容（特别是动态内容）未完全加载时， // 提前进行不准确的页面高度计算。 lenis.stop(); // 2. 在文档DOM完全加载并准备就绪后，重新启动Lenis // Webflow通常默认包含jquery，因此可以使用 $(document).ready()。 // 这确保了Lenis在所有静态和动态内容（如Webflow CMS内容、Swiper组件等） // 都已渲染完毕后，才开始其滚动功能，从而能正确计算页面的完整高度。 $(document).ready(function() { lenis.start(); // 此时重新启动Lenis，它将基于完整的DOM结构进行计算 // 注意：如果页面有大量图片或其他需要更长时间加载的资源， // 并且这些资源会显著影响页面高度，可能需要考虑更晚的事件， // 例如 window.onload 或使用 MutationObserver 监听特定容器变化。 // 但对于大多数Webflow场景，$(document).ready() 已足够有效。 });
代码解释
- lenis.stop();: 这行代码在Lenis初始化后立即执行，暂停了Lenis的滚动事件监听和高度计算。这是为了避免在页面DOM尚未完全稳定时，Lenis就基于一个错误的高度进行工作。
- $(document).ready(function() { … });: 这是jQuery提供的一个事件，它会在DOM（文档对象模型）完全加载和解析完毕后触发。这意味着所有html元素都已创建，但可能图片等外部资源尚未完全加载。对于大多数动态内容而言，DOM Ready时机足以确保其结构已存在于页面中。
- lenis.start();: 在 $(document).ready() 回调函数内部调用 lenis.start()，确保Lenis在页面结构稳定且所有动态内容都已加载（或至少其占位符已存在）时，重新开始其滚动监听和高度计算。此时，Lenis将能够准确地获取页面的完整可滚动高度。
注意事项与最佳实践
- 加载时机的重要性： 理解 $(document).ready() 与 window.onload 的区别至关重要。$(document).ready() 在DOM结构准备就绪后触发，而 window.onload 则在所有资源（包括图片、css、JS文件等）都加载完毕后触发。对于大多数影响滚动高度的动态内容，$(document).ready() 已足够。但如果你的页面高度严重依赖于图片等异步加载的媒体资源，你可能需要考虑在 window.onload 中或在图片加载完成后再启动Lenis，甚至在图片加载完成后手动调用 lenis.resize()。
- Webflow环境： 在Webflow中，确保将上述脚本放置在“自定义代码”设置的“Before