当前位置：首页 > 文章列表 > 文章 > 前端 > Lenis触底滚动问题解决方法

Lenis触底滚动问题解决方法

2025-11-11 08:30:32 0浏览收藏

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《Lenis滚动触底问题解决方法》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

解决Lenis平滑滚动无法触底的问题：Webflow动态内容场景下的初始化策略

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项目的“自定义代码”设置中，位于标签之前。

首先，确保你的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