Avada主题100% Height Scroll首屏双次滚动故障求助

核心根因 #

全屏滚动脚本初始化时计算的首屏高度与实际可视区高度不匹配，存在未被识别的冗余占位高度，第一次滚轮事件仅消耗了冗余高度差，第二次才会触发整屏跳转逻辑。

排查修复步骤 #

• 修复WordPress管理员栏高度偏移
  登录态下出现该问题基本都是管理员栏高度未被脚本纳入偏移计算，直接在主题自定义CSS中加入以下代码：

  /* 修正首屏全屏高度计算 */
  .avada-full-height-section:first-child {
    height: calc(100vh - var(--wp-admin--admin-bar--height, 0)) !important;
  }
  /* 清除全屏滚动默认顶部偏移 */
  .fusion-full-height-scroll-wrapper {
    padding-top: 0 !important;
  }
  

  保存后清空全站缓存测试即可。
• 修正动态资源加载导致的高度计算偏差
  如果匿名窗口访问也存在问题，是首屏懒加载资源（图片、图标、延迟渲染的组件）在脚本计算完高度后才加载，撑大了首屏实际高度：
  1. 关闭首屏所有图片、视频、组件的懒加载选项，首屏用到的字体设为预加载
  2. 进入Avada主题选项 > 全屏滚动设置，将脚本初始化触发时机从「DOM加载完成」修改为「所有资源加载完成」，追加200ms初始化延迟
  3. 如果安装了JS延迟加载、性能优化插件，将Avada全屏滚动核心脚本fusion-fullpage-scroll.js加入延迟加载白名单
• 排查冗余占位元素
  打开浏览器开发者工具，选中<html>标签逐层级检查盒模型，重点排查：
  1. 全局样式给body、主容器加的默认margin/padding
  2. 隐藏的面包屑、GDPR提示条、返回顶部组件的初始占位高度
  3. 自定义代码加在首屏前的伪元素占位
     找到对应元素后将其高度纳入全屏滚动偏移设置，或直接删除冗余占位样式即可。

验证标准 #

修复后清空所有缓存，匿名窗口访问页面，单次向下滚动鼠标滚轮即可直接跳转至第二屏内容，无空滚、卡顿现象。

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