Mac版Safari中无法拖拽RTL方向水平滚动条问题咨询

这确实是Mac版Safari的特有兼容性表现，不算标准意义上的Bug，只是它对RTL布局下滚动交互的实现逻辑和Chrome、Firefox等浏览器存在差异——当容器设置direction: rtl后，Safari对滚动条的可交互区域判定出现偏差，导致无法直接抓取拖动。

如果需要兼容Safari，不用折腾复杂的WebKit私有属性，有两个简单方案可选：

• 方案一：给容器添加-webkit-overflow-scrolling: touch;，这个属性原本是优化移动端滚动流畅度的，但在Mac版Safari里能顺带修正RTL布局的滚动条交互问题：

  overflow-x: scroll;
  direction: rtl;
  -webkit-overflow-scrolling: touch;
  

• 方案二：放弃使用direction: rtl，改用flex布局的反向排列实现内容从右到左展示，滚动条交互就能恢复正常：

  display: flex;
  flex-direction: row-reverse;
  overflow-x: scroll;
  

要是你的产品对Safari兼容性要求不高，保持原有代码完全没问题，毕竟这只是Safari独有的行为，其他主流浏览器都能正常运行。

内容的提问来源于stack exchange，提问作者Smith.A.H