WordPress添加文本滚动CSS后页面反向滚动问题求助

问题分析 #

你遇到的页面上下滚动时反向移动的问题，根源在于当前CSS代码未限制动画元素的溢出范围，加上错误的宽度设置，导致浏览器计算页面横向滚动边界时出现异常：

• .bless 设置了 width: 100% 但 white-space: nowrap 让文本内容溢出容器，拉长了页面的实际横向宽度
• 动画的 translateX 变换基于这个异常宽度计算，触发浏览器滚动机制的兼容问题，表现为上下滚动时页面反向偏移

修复方案 #

通过两步修改CSS，将动画限制在独立容器内，避免影响整个页面滚动：

1. 添加动画容器：给滚动文本的父元素添加容器，用来限制溢出范围
2. 调整动画元素样式与动画参数：让元素宽度自适应内容，修正动画的位移范围

修改后的完整代码

/* 新增容器样式 */
.bless-container {
  width: 100%;
  overflow: hidden; /* 隐藏容器外内容，避免影响页面滚动 */
  position: relative;
}

.bless {
  display: inline-block; /* 让宽度自适应文本内容，而非强制100% */
  font-weight: bold;
  white-space: nowrap;
  color: #fbfbfb;
  animation: leftToright 15s linear infinite;
}

@keyframes leftToright {
  0% {
    transform: translateX(-100%); /* 初始位置：文本完全在容器左侧外部 */
  }
  100% {
    transform: translateX(calc(100vw)); /* 结束位置：文本完全移动到容器右侧外部 */
  }
}

对应HTML结构调整

确保滚动文本被包裹在新增容器内：

<div class="bless-container">
  <div class="bless">你的滚动文本内容</div>
</div>

额外排查点 #

如果修改后问题仍存在，可检查：

• WordPress主题是否有全局 overflow-x 设置，比如 body { overflow-x: auto }，可改为 overflow-x: hidden（注意不要影响其他正常横向内容）
• 是否有其他插件或主题CSS中的 transform 或 scroll-behavior 属性与当前动画冲突

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