Firefox中滚动容器内sticky元素边缘定位异常，求兼容解决方案

问题说明 #

在Firefox浏览器中，设置position: sticky和负margin-inline-end的元素，在横向滚动的父容器内无法保持预期的固定位置（固定在父容器右边缘），该行为与Chrome浏览器表现不一致。此问题已提交至Mozilla Bugzilla（编号：1895739）。

原代码示例 #

<div class="parent">
  <div class="scroller">
    <div class="button back"></div>
    <div class="button forward"></div>
  </div>
</div>

.parent {
  background: lightblue;
  width: 800px;
  height: 50px;
  overflow: scroll;
}

.scroller {
  width: 150%;
  height: 40px;
  background: blue;
  border: 1px solid red;
}

.button {
  position: sticky;
  width: 50px;
  height: 20px;
  background: green;
  border: 1px solid cyan;
}

.back {
  inset-inline-start: 1em;
}

.forward {
  inset-inline-start: 100%;
  translate: calc(-100% - 1em);
  margin-inline-end: -100%;
}

预期行为：.forward元素始终固定在.parent容器的右边缘，不受.scroller横向滚动影响。

兼容解决方案 #

方案1：调整HTML结构（推荐） #

将.forward按钮从.scroller中移出，作为.parent的直接子元素，利用position: sticky直接相对于父容器定位，无需依赖负margin：

<div class="parent">
  <div class="scroller">
    <div class="button back"></div>
  </div>
  <div class="button forward"></div>
</div>

.parent {
  background: lightblue;
  width: 800px;
  height: 50px;
  overflow: scroll;
  position: relative; /* 确保sticky元素的定位上下文 */
}

.scroller {
  width: 150%;
  height: 40px;
  background: blue;
  border: 1px solid red;
}

.button {
  position: sticky;
  width: 50px;
  height: 20px;
  background: green;
  border: 1px solid cyan;
}

.back {
  inset-inline-start: 1em;
}

.forward {
  right: 1em;
  top: 50%;
  translate: 0 -50%; /* 垂直居中 */
}

原理：.forward的sticky定位直接基于.parent容器，通过right:1em固定在右边缘，translate实现垂直居中，完全避免了Firefox对负margin的异常处理。

方案2：不修改HTML结构的CSS兼容 #

如果无法调整HTML结构，可通过CSS变量和padding替代负margin，让.forward基于.scroller的padding区域定位：

.parent {
  background: lightblue;
  width: 800px;
  height: 50px;
  overflow: scroll;
}

.scroller {
  width: 150%;
  height: 40px;
  background: blue;
  border: 1px solid red;
  /* 预留按钮+间距的右侧padding */
  padding-right: calc(var(--button-width) + 1em);
}

.button {
  --button-width: 50px;
  position: sticky;
  width: var(--button-width);
  height: 20px;
  background: green;
  border: 1px solid cyan;
}

.back {
  inset-inline-start: 1em;
}

.forward {
  right: 1em; /* 相对于父容器（.parent）的右边缘 */
}

原理：通过给.scroller添加右侧padding，确保.forward有足够空间定位，同时用CSS变量统一管理按钮宽度，避免硬编码固定数值，兼容Firefox和Chrome的sticky定位逻辑。

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