触屏模式下设置direction:rtl后scrollLeft数值异常的技术咨询

问题现象 #

给存在溢出的DOM元素设置direction:rtl后，在触屏模式下操作滚动时，scrollLeft值出现不符合预期的异常：

• 初始状态本应无法向左滚动，scrollLeft值应从负向0过渡，但实际可左滑，且获取到正数scrollLeft值（如0.6666666865348816）
• 将元素滑动至右侧后返回初始位置，scrollLeft值不再回到0，始终固定为0.6666666865348816

复现代码 #

HTML #

<h1 class="flex--item fl1 fs-headline1 testScrollLeft">
  Top Questions Top Questions Top Questions Top Questions Top Questions Top Questions Top Questions Top Questions Top Questions Top Questions
</h1>

CSS #

.testScrollLeft {
  width: 100%;
  direction: rtl;
  text-align: right;
  overflow-x: scroll;
  white-space: nowrap;
}

JS测试代码 #

const priceElement = document.querySelector('.testScrollLeft');
console.log(priceElement.scrollLeft);

控制台输出 #

const priceElement = document.querySelector('.testScrollLeft');

> priceElement.scrollLeft 0 
priceElement.scrollLeft
> 0.6666666865348816 
priceElement.scrollLeft
> 0.6666666865348816 
priceElement.scrollLeft
> 0.6666666865348816

原因分析 #

这是浏览器处理RTL（从右到左）方向滚动时的浮点精度计算偏差，结合触屏交互的滚动事件触发逻辑导致的。RTL元素的滚动原点计算逻辑与LTR（从左到右）不同，浏览器内部在计算初始滚动位置和处理触屏滚动后的位置时，产生了微小的精度误差，且该误差在交互后被固化。

解决方案 #

1. 初始化强制修正滚动位置 #

在元素渲染完成后，手动将scrollLeft设置为0，覆盖浏览器的异常初始值：

const priceElement = document.querySelector('.testScrollLeft');
// 用requestAnimationFrame确保元素已完成渲染
requestAnimationFrame(() => {
  priceElement.scrollLeft = 0;
});

2. 读取scrollLeft时做精度兼容 #

如果需要基于scrollLeft判断滚动状态，对读取的值做阈值过滤，忽略微小的小数偏差：

const getAccurateScrollLeft = (element) => {
  const rawValue = element.scrollLeft;
  // 偏差小于0.1时视为0，可根据需求调整阈值
  return Math.abs(rawValue) < 0.1 ? 0 : rawValue;
};

// 使用示例
const priceElement = document.querySelector('.testScrollLeft');
console.log(getAccurateScrollLeft(priceElement));

3. 替代方案：模拟RTL布局（可选） #

如果原生RTL的滚动精度问题严重影响业务逻辑，可以改用LTR方向，通过反向布局模拟RTL效果，避免原生RTL的滚动计算问题：

.testScrollLeft {
  width: 100%;
  direction: ltr; /* 改用LTR */
  display: flex;
  justify-content: flex-end; /* 模拟右对齐 */
  overflow-x: scroll;
  white-space: nowrap;
}

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