如何将元素固定在横向溢出容器的右侧边缘

核心问题拆解 #

1. 当前红色指示器始终显示，未做到「仅溢出时显示」
2. 指示器无法固定在容器的可视右侧边缘，会随内容滚动

方案1：纯CSS近似实现（无需修改HTML） #

通过sticky定位固定指示器，结合hover交互模拟「溢出显示」逻辑：

.rpt {
  display: block;
  position: relative;
  overflow-x: auto;
  width: 100%;
  padding-right: 30px;
  box-sizing: border-box;
}

.rpt::after {
  content: "";
  position: sticky;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: #b00;
  pointer-events: none;
  z-index: 1;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.2s;
}

.rpt:hover::after {
  opacity: 1;
}

.rpt .rpt-row {
  flex-wrap: nowrap;
  display: flex;
  height: 50px;
  padding-right: 30px;
}

.flx-item {
  width: 100px;
}

说明：这个方案通过hover触发显示，是纯CSS能实现的最优近似效果，无法精准判断内容是否溢出，适合对精度要求不高的场景。

方案2：JavaScript精准实现（推荐） #

通过JS检测容器溢出状态，动态控制指示器显示/隐藏，并计算固定位置：

调整后的CSS #

.rpt {
  display: block;
  position: relative;
  overflow-x: auto;
  width: 100%;
}

.rpt::after {
  content: "";
  position: fixed;
  top: var(--indicator-top);
  right: var(--indicator-right);
  width: 30px;
  height: 30px;
  background: #b00;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s;
}

.rpt.has-overflow::after {
  opacity: 1;
}

.rpt .rpt-row {
  flex-wrap: nowrap;
  display: flex;
  height: 50px;
}

.flx-item {
  width: 100px;
}

JS代码 #

const container = document.querySelector('.rpt');

function updateIndicator() {
  const isOverflow = container.scrollWidth > container.clientWidth;
  container.classList.toggle('has-overflow', isOverflow);

  if (isOverflow) {
    const rect = container.getBoundingClientRect();
    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
    container.style.setProperty('--indicator-top', `${rect.top}px`);
    container.style.setProperty('--indicator-right', `${scrollbarWidth}px`);
  }
}

// 初始化+监听事件
updateIndicator();
window.addEventListener('resize', updateIndicator);
container.addEventListener('scroll', updateIndicator);

说明：这个方案能精准判断内容是否溢出，通过fixed定位和动态计算的CSS变量，让指示器牢牢固定在容器的可视右侧边缘，不会随内容滚动，完全符合需求。

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