Wordpress站点Skrollr在移动端无法滚动，最快的解决方法是什么？

Skrollr已停止维护近10年，对现代移动端触摸滚动、CSS新特性兼容性较差，临近上线可以按以下步骤快速修复故障： #

第一步：修复资源重复加载问题 #

你当前将skrollr库引入和初始化代码写在了单个区块的HTML中，页面存在2个同类动画区块就会触发重复加载、重复初始化，直接导致滚动冲突。

• 移除所有单个区块HTML内的skrollr库引入代码、skrollr.init()初始化代码
• 将skrollr.min.js的引入放到子主题functions.php中全局加载，仅加载1次

第二步：修正skrollr-body的绑定逻辑 #

skrollr默认会修改绑定元素的滚动逻辑，绑定到body标签会和粘性头部等固定定位元素冲突，绑定到单个区块会导致滚动范围计算错误：

• 恢复父主题header.php中body标签的原始代码，移除skrollr-bodyID
• 在子主题全局JS中添加以下代码，自动绑定到Elementor主内容容器：

document.addEventListener('DOMContentLoaded', function() {
  const mainContent = document.querySelector('.elementor') || document.querySelector('#content') || document.body.firstElementChild;
  if(mainContent) mainContent.id = 'skrollr-body';
})

第三步：重写初始化&移动端销毁逻辑 #

你之前的销毁逻辑仅在库加载时执行1次，没有监听窗口变化、也没有添加兼容参数，替换所有原有skrollr初始化代码为以下内容：

let skrollrInstance = null;
function toggleSkrollr() {
  // 仅在大于767px的设备上初始化
  if(window.innerWidth > 767 && !skrollrInstance) {
    skrollrInstance = skrollr.init({
      forceHeight: false, // 禁止强制修改页面高度
      smoothScrolling: false, // 关闭平滑滚动避免移动端触摸冲突
      excludedElements: '.elementor-sticky, .elementor-fixed' // 排除粘性头部等固定元素
    });
  } else if(window.innerWidth <= 767 && skrollrInstance) {
    // 移动端直接销毁实例
    skrollrInstance.destroy();
    skrollrInstance = null;
  }
}
// 页面加载完成执行
document.addEventListener('DOMContentLoaded', toggleSkrollr);
// 窗口尺寸变化时重新判断
window.addEventListener('resize', toggleSkrollr);

第四步：优化动画属性降低性能损耗 #

你当前使用top属性做位移动画，会频繁触发浏览器重排导致卡顿，替换所有动画节点上的top属性为transform: translateY()，比如：
原属性data-center-top="opacity: 0; top: 100%;"替换为data-center-top="opacity: 0; transform: translateY(100%);"
数值按原动画逻辑对应调整即可，效果完全一致，性能提升明显。 #

第五步：降级兼容兜底 #

如果以上调整后仍有异常，添加以下CSS直接给移动端屏蔽动画，保证页面可正常滚动访问：

@media(max-width:767px) {
  .panel1-1a, .panel2-1a {
    opacity: 1 !important;
    transform: none !important;
    position: relative !important;
    top: auto !important;
  }
}

内容的提问来源于stack exchange，提问作者Taylor Pepler-Madsen