如何让水平滚动的面包屑导航表格默认右对齐以显示当前页面层级

解决方案 #

方案1：纯CSS实现（推荐，改动最小）

利用书写方向特性让滚动条默认对齐最右侧，仅需要修改两处CSS：

1. 给.bcnavbar新增direction: rtl属性，同时将原有max-width: fit-content改为max-width: 100%（确保容器宽度不会随内容无限撑开，触发溢出滚动）
2. 给表格行添加样式重置文字方向，避免导航内容顺序反转

修改后的CSS片段如下：

.bcnavbar {
  display: block;
  border-collapse: separate;
  border-spacing: 0px;
  max-width: 100%; /* 此处修改 */
  overflow-x: scroll;
 /* scrollbar-width: none; */
  white-space: nowrap;
  padding-bottom: 5px;
  direction: rtl; /* 新增属性 */
}

/* 新增下面这段样式 */
.bcnavbar tr {
  direction: ltr;
}

方案2：JS实现（兼容性最佳，无布局副作用）

如果担心CSS方案的书写方向会引发其他布局问题，可以用JS在页面加载完成后直接设置滚动位置：

// 页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  const nav = document.querySelector('.bcnavbar')
  // 直接将滚动位置拉到最右侧
  nav && (nav.scrollLeft = nav.scrollWidth)
})

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