Lenis Scroll问题：无法滚动至页面底部的排查求助

问题根源 #

Lenis初始化时会计算当前页面的总高度，但Webflow里不少内容（比如延迟加载的图片、动态渲染的组件）是在Lenis启动后才加载完成的，导致Lenis缓存的高度和实际页面高度不匹配。调整窗口时Lenis会自动重新计算高度，所以滚动恢复正常。

具体修复方法 #

1. 监听DOM变化，实时更新Lenis高度 #

用MutationObserver监听页面内容的变化，只要有新元素加载完成，就强制Lenis重新计算高度：

const lenis = new Lenis()

lenis.on('scroll', (e) => {
  console.log(e)
})

function raf(time) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}

requestAnimationFrame(raf)

// 监听body下的DOM变化，触发高度重算
const observer = new MutationObserver(() => {
  lenis.resize()
})

observer.observe(document.body, {
  childList: true,
  subtree: true
})

如果觉得全局监听太消耗性能，可以只监听Webflow动态内容的容器（比如CMS列表的父元素），缩小监听范围。

2. 等页面完全加载后再初始化Lenis #

把Lenis的初始化代码放在window.load事件里，等所有图片、动态资源加载完成后再启动Lenis：

window.addEventListener('load', () => {
  const lenis = new Lenis()

  lenis.on('scroll', (e) => {
    console.log(e)
  })

  function raf(time) {
    lenis.raf(time)
    requestAnimationFrame(raf)
  }

  requestAnimationFrame(raf)
})

小提示：如果担心window.load等待时间太长出现原生滚动闪屏，可以在CSS里先隐藏滚动条，等Lenis初始化后再显示：

body { overflow: hidden; }

然后在Lenis初始化后再移除这个样式。

3. 定时触发高度重算（兜底方案） #

要是找不到具体的内容加载触发点，就设置一个定时任务，每隔一段时间让Lenis重新计算一次高度：

const lenis = new Lenis()

lenis.on('scroll', (e) => {
  console.log(e)
})

function raf(time) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}

requestAnimationFrame(raf)

// 每2秒更新一次高度，可根据实际情况调整间隔
setInterval(() => {
  lenis.resize()
}, 2000)

4. 检查代码放置位置 #

确保Lenis的初始化代码放在Webflow后台的Before tag区域，而不是里，这样能保证DOM结构基本加载完成后再初始化Lenis，减少初始高度计算的偏差。

内容的提问来源于stack exchange，提问作者rebuildtheweb