Divi滑块导致Chrome页面滚动卡顿及吸附问题求助

• 页面滚动经过Slider组件（如 testimonials 区块、Image Carousel 区块）时，会被强制滚动回该Slider位置；滚动至页面底部时，会被吸附到上方轮播组件，无法正常到达页脚。
• 该问题仅在非Firefox浏览器中出现，Firefox下无异常。
• 已排查Divi内置设置、代码层面的scrollTo相关操作，未发现明显异常。

1. 禁用轮播组件的自动焦点行为 #

Divi的Carousel/Testimonial模块切换时可能自动获取焦点，触发浏览器滚动聚焦。可通过以下方式处理：

• CSS方式：给目标Slider模块添加自定义CSS类（例如no-auto-scroll），然后添加样式：

.no-auto-scroll * {
  outline: none !important;
  scroll-margin-top: 0 !important;
}
.no-auto-scroll {
  scroll-behavior: auto !important;
}

• JS方式：添加自定义脚本阻止焦点触发的滚动：

document.addEventListener('DOMContentLoaded', () => {
  const sliders = document.querySelectorAll('.et_pb_slider, .et_pb_testimonial_carousel, .et_pb_image_carousel');
  sliders.forEach(slider => {
    slider.addEventListener('focusin', e => {
      e.preventDefault();
      e.stopPropagation();
    }, true);
  });
});

2. 调整轮播模块核心设置 #

进入Divi模块编辑界面，尝试：

• 关闭自动播放功能，改为手动切换轮播
• 禁用循环播放选项，避免轮播重置时触发滚动回调

3. 覆盖Divi轮播的默认JS行为 #

部分浏览器对scrollIntoView的处理与Firefox不同，可通过修改Owl Carousel的初始化参数解决：

jQuery(document).ready($ => {
  if (typeof $.fn.owlCarousel !== 'undefined') {
    const originalInit = $.fn.owlCarousel;
    $.fn.owlCarousel = function(options) {
      // 移除可能触发滚动的自动行为
      if (options) {
        options.autoplay = false;
        options.autoplayHoverPause = false;
        options.smartSpeed = 0;
      }
      return originalInit.call(this, options);
    };
  }
});

4. 排查插件冲突 #

禁用所有非Divi官方插件，逐一重新启用，测试是否是第三方插件与轮播的滚动事件冲突导致问题。

5. 更新Divi版本 #

旧版Divi的轮播模块存在浏览器兼容性bug，更新到官方最新版本后重新测试。

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