如何在WordPress页面中正确插入实现横纵滚动的HTML/CSS/JS代码？

问题原因 #

你遇到的问题是WordPress环境特有的兼容性问题，核心原因有4个：

• JS执行时机错误：原代码会在页面加载到JS位置就立刻执行，此时DOM元素可能还没完全渲染完成，导致querySelector获取不到对应元素，变量赋值为undefined，逻辑直接失效。
• 滚动事件被覆盖：直接给window.onscroll赋值会覆盖WordPress主题、其他插件绑定的滚动事件，也可能被后续加载的脚本覆盖你的滚动逻辑。
• sticky属性失效：绝大多数WordPress主题的外层容器默认会设置overflow: hidden/auto属性，会直接导致子元素的sticky定位失效。
• 多余的jQuery引入：你的JS逻辑完全没有用到jQuery，额外引入的jQuery库可能和WordPress自带的jQuery产生冲突。

修复方案 #

直接使用下方整合好的完整代码，复制粘贴到古腾堡编辑器的自定义HTML区块即可，不要使用普通文本区块、WP Bakery的Raw区块（部分主题会对这些区块的代码做转义处理）。

完整可直接使用的代码 #

<style>
/* 重置主题外层容器的overflow影响，如不生效可替换为你主题内容容器的实际类名 */
.entry-content {
  overflow: visible !important;
}
.horizontall-section {
  padding: 100px 0 !important;
  background-color: pink !important;
  overflow: visible !important;
}
.stickyy-wrapper {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 100px !important;
  width: 100% !important;
  overflow: hidden !important;
}
.elementt-wrapper {
  position: relative !important;
  display: flex !important;
}
.elementt {
  width: 500px !important;
  height: 400px !important;
  background-color: purple !important;
  margin: 0 20px 0 0 !important;
  flex-shrink: 0 !important;
}
.cont {
  max-width: 1000px;
  margin: 30px auto;
  padding: 0 20px;
}
</style>

<div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class="horizontall-section">
  <div class="stickyy-wrapper">
    <div class="elementt-wrapper">
      <div class="elementt"></div>
      <div class="elementt"></div>
      <div class="elementt"></div>
      <div class="elementt"></div>
      <div class="elementt"></div>
    </div>
  </div>
</div>

<div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class="cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 元素不存在则终止执行，避免报错
  const horSection = document.querySelector(".horizontall-section");
  const eleWrapper = document.querySelector(".elementt-wrapper");
  if (!horSection || !eleWrapper) return;

  let windowWidth = window.innerWidth;
  let horLength = eleWrapper.scrollWidth;
  let distFromTop = horSection.offsetTop;
  let scrollDistance = distFromTop + horLength - windowWidth;
  horSection.style.height = horLength + "px";

  // 滚动逻辑
  function handleScroll() {
    const scrollTop = window.pageYOffset;
    if (scrollTop >= distFromTop && scrollTop <= scrollDistance) {
      eleWrapper.style.transform = "translateX(-" + (scrollTop - distFromTop) + "px)";
    }
  }

  // 窗口尺寸变化时重新计算参数
  function handleResize() {
    windowWidth = window.innerWidth;
    horLength = eleWrapper.scrollWidth;
    distFromTop = horSection.offsetTop;
    scrollDistance = distFromTop + horLength - windowWidth;
    horSection.style.height = horLength + "px";
    handleScroll();
  }

  window.addEventListener('scroll', handleScroll);
  window.addEventListener('resize', handleResize);
})
</script>

异常排查 #

如果插入后依然失效，按以下步骤检查：

1. 按F12打开浏览器控制台，查看是否有JS报错，根据报错提示调整
2. 找到你的主题内容外层容器的实际类名，替换掉CSS里的.entry-content，确保它的overflow属性为visible
3. 暂时禁用其他插件，排查是否有插件滚动逻辑冲突

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