无需JavaScript，如何实现scrollLeft效果预滚动可滚动容器？

可以完全通过CSS实现，避免JavaScript修改scrollLeft导致的滚动跳变/卡顿问题，核心思路是通过反转布局方向让容器默认显示内容末尾。

实现方案 #

通过调整容器和子元素的布局方向，让浏览器原生将滚动位置定位到内容末尾，无需JS介入：

/* 滚动容器样式 */
.card-container {
  display: flex;
  overflow-x: auto;
  direction: rtl; /* 反转容器的滚动起始方向，默认停在内容右侧（原末尾） */
}

/* 子元素样式：恢复正常排版 */
.card-container > .card {
  direction: ltr; /* 还原文本和内部布局方向 */
  flex-direction: row; /* 保持子元素的横向排列逻辑 */
  /* 保留你原本的子元素样式：比如 width、margin、padding 等 */
}

原理说明 #

• direction: rtl 会让容器的内容流从右向左排列，容器的默认滚动位置会自动定位到内容的最右端，也就是原内容的末尾位置。
• 给子元素设置direction: ltr是为了避免文本、内部元素的排版被反转，保证内容显示正常。
• 这种方式是浏览器渲染阶段就确定的布局，完全没有JS执行时的“先显示初始位置再跳转”的视觉卡顿。

替代方案（如果不适用flex布局） #

如果容器用的是inline-block或其他布局，可以用以下方式：

.card-container {
  overflow-x: auto;
  direction: rtl;
  text-align: right; /* 配合inline-block子元素 */
}

.card-container > .card {
  direction: ltr;
  display: inline-block;
  text-align: left;
}

内容的提问来源于stack exchange，提问作者Clifford Fajardo