overflow-x横向滚动仅生效一次问题求助

排查方向及解决办法 #

1. 修正容器与子元素的宽度逻辑 #

你的CSS仅设置了容器的横向滚动属性，但如果子元素未正确撑开宽度导致总长度未超出容器，滚动一次后就会失去可滚动空间。可以调整样式确保子元素不换行且总宽度溢出：

.testujemerow {
  overflow-x: auto;
  max-width: 100%;
  width: 100%;
  white-space: nowrap; /* 强制子元素不换行，保证横向溢出 */
}

.testujemerow > * {
  display: inline-block; /* 或给容器设置display: flex; flex-wrap: nowrap; */
}

注：尽量移除不必要的!important，避免优先级冲突导致样式失效

2. 排查JavaScript事件干扰 #

如果页面中有自定义JS监听滚动事件，可能在首次滚动后修改了容器的overflow、width等属性，导致滚动失效。可以：

• 临时移除页面中的自定义JS代码，测试滚动是否恢复正常
• 检查是否有代码在滚动触发后给.testujemerow添加了overflow-x: hidden这类限制样式

3. 检查父元素布局影响 #

若.testujemerow的父元素设置了overflow: hidden或width: 100%且包含额外内边距/边框，可能压缩容器的实际可滚动宽度。可给父元素添加：

.testujemerow-parent {
  box-sizing: border-box; /* 确保内边距不占用宽度空间 */
  overflow: visible; /* 避免父元素截断子容器的滚动区域 */
}

4. 测试最小案例排查冲突 #

如果上述方法无效，可搭建最小测试案例排除其他代码干扰：

<div class="testujemerow">
  <div class="item">内容模块1</div>
  <div class="item">内容模块2</div>
  <div class="item">内容模块3</div>
  <div class="item">内容模块4</div>
  <div class="item">内容模块5</div>
</div>

<style>
.testujemerow {
  overflow-x: auto;
  max-width: 100%;
  width: 100%;
  white-space: nowrap;
}
.item {
  display: inline-block;
  width: 300px;
  height: 100px;
  margin-right: 10px;
  background: #eee;
}
</style>

若该案例能正常滚动，说明问题源于原有代码中的其他样式冲突或脚本干扰。

内容的提问来源于stack exchange，提问作者Chad Davis