优化Lenis Smooth Scroll：解决页面底部滚动受限问题

本文探讨lenis平滑滚动库在动态内容加载后无法滚动至页面底部的问题。核心原因在于lenis初始化过早，未能正确识别完整的dom高度。解决方案是利用$(document).ready()确保在所有页面元素加载完毕后，先停止并随后重新启动lenis，从而使其能准确计算并适应最终的页面布局，恢复流畅的滚动体验。

引言：Lenis Smooth Scroll的滚动限制问题

Lenis是一个流行的JavaScript库，用于为网页提供流畅的平滑滚动体验。然而，在某些复杂的网页环境中，尤其是在使用Webflow这类内容管理系统（CMS）或涉及大量动态加载内容的网站上，开发者可能会遇到一个常见问题：页面无法滚动到最底部。用户可能会发现，在页面加载完成后，滚动条似乎在某个点戛然而止，无法触及页面的最底端内容。一个有趣的现象是，当用户手动调整浏览器窗口大小时，滚动功能又会瞬间恢复正常，允许滚动到页面底部。这表明问题并非出在滚动功能本身，而是与页面的布局计算或初始化时机有关。

问题根源分析：初始化时机与DOM加载

导致Lenis无法滚动到页面底部的核心原因在于其初始化时机。在许多现代前端开发实践中，页面内容并非一次性完全加载。例如，Webflow的CMS内容、懒加载的图片、第三方组件（如Swiper滑块）、或者通过JavaScript动态注入的内容，都可能在初始DOM加载完成后才呈现。

当Lenis在这些动态内容尚未完全加载和渲染之前就完成初始化时，它会基于当时不完整的DOM结构来计算页面的总高度和可滚动区域。一旦后续内容加载并扩展了页面的实际高度，Lenis的内部计算值就不会自动更新，导致其认为页面已经“到底”了，从而限制了实际的滚动范围。当用户调整窗口大小时，浏览器通常会触发重绘和重新布局，这可能间接促使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初始化代码已经存在。然后，在您页面的全局代码区域（通常是</body>标签之前，确保在Lenis初始化代码之后执行），添加以下JavaScript代码：

// 停止Lenis的当前滚动监听，防止其在不完整DOM上工作
lenis.stop();

// 确保在DOM完全加载并准备就绪后，重新启动Lenis
$(document).ready(function(){
    lenis.start();
});

代码详解与注意事项

1. lenis.stop();

   

   千面视频动捕

   千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

   27

   查看详情
   • 这行代码的作用是立即停止Lenis实例当前的滚动行为和事件监听。在页面初始加载阶段，我们不希望Lenis基于不完整的DOM进行计算和工作，因此将其暂停是必要的。

2. $(document).ready(function(){ ... });

   • 这是一个jQuery函数，用于确保其内部的回调函数在整个DOM树完全构建并可操作时才执行。这意味着所有HTML元素都已经加载到内存中，并且可以被JavaScript访问和操作。对于动态加载内容的网站，这是一个非常可靠的时机来确保所有内容都已到位。
   • 重要提示： 如果您的项目没有引入jQuery库，您需要使用原生JavaScript的替代方案，例如：

     document.addEventListener('DOMContentLoaded', function() {
         lenis.start();
     });

     登录后复制

     或者，如果需要等待图片等资源加载完毕，可以使用window.onload：

     window.onload = function() {
         lenis.start();
     };

     登录后复制

     请根据您的项目实际需求选择最合适的事件。

3. lenis.start();

   • 这行代码在$(document).ready()（或其原生JavaScript替代）的回调函数中执行，意味着当所有DOM元素都已加载并准备就绪时，Lenis才会被重新激活。此时，Lenis会基于完整的页面结构重新计算可滚动区域和总高度，从而确保能够准确地滚动到页面的最底部。

4. 放置位置

   • 在Webflow项目中，这段优化代码应放置在“自定义代码”设置中的“在 </body> 标签之前”的区域。确保它在您最初的Lenis初始化代码之后，以便lenis对象已经定义。

总结

Lenis Smooth Scroll无法滚动至页面底部的问题，本质上是由于其初始化时机与页面内容动态加载之间的冲突所致。通过在页面所有DOM元素加载完毕后再重新启动Lenis，我们可以确保它能够准确地识别页面的完整高度。利用$(document).ready()（或原生JavaScript的DOMContentLoaded事件）来延迟Lenis的启动，是解决这一问题的最有效和最可靠的方法，从而为用户提供一个真正无缝、完整的平滑滚动体验。

以上就是优化Lenis Smooth Scroll：解决页面底部滚动受限问题的详细内容，更多请关注php中文网其它相关文章！