如何让水平菜单适配RTL布局，实现从右向左滚动？

核心思路 #

通过检测菜单容器的布局方向（RTL/LTR），针对性调整滚动判断逻辑，让菜单在RTL模式下从右侧开始滚动，匹配布局习惯。

步骤1：检测RTL布局 #

利用getComputedStyle获取容器的direction属性值，判断是否为RTL布局：

const menu = document.querySelector('.scroll-menu');
const isRTL = getComputedStyle(menu).direction === 'rtl';

步骤2：调整滚动重置逻辑 #

修改原有currentScroll === 0的判断逻辑，根据布局方向分别处理：

function adjustScroll() {
  const menu = document.querySelector('.scroll-menu');
  const isRTL = getComputedStyle(menu).direction === 'rtl';
  const currentScroll = menu.scrollLeft;

  if (isRTL) {
    // RTL布局下，判断是否处于最右侧滚动位置
    const maxScroll = menu.scrollWidth - menu.clientWidth;
    if (currentScroll === maxScroll) {
      menu.scrollTo({ left: maxScroll, behavior: 'smooth' });
    }
  } else {
    // LTR布局保留原有逻辑
    if (currentScroll === 0) {
      menu.scrollTo({ left: 0, behavior: 'smooth' });
    }
  }
}

步骤3：初始化时设置RTL默认滚动位置 #

页面加载完成后，若为RTL布局，直接将菜单滚动到最右侧：

document.addEventListener('DOMContentLoaded', () => {
  const menu = document.querySelector('.scroll-menu');
  const isRTL = getComputedStyle(menu).direction === 'rtl';
  
  if (isRTL) {
    menu.scrollLeft = menu.scrollWidth - menu.clientWidth;
  }
});

关键说明 #

RTL布局中，scrollLeft的取值逻辑与LTR完全相反：

• scrollLeft = 0 对应容器的最右侧
• scrollLeft = scrollWidth - clientWidth 对应容器的最左侧
  因此需要通过计算最大滚动值来判断是否处于RTL的起始滚动位置。

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