如何让sticky div始终固定在容器可视区域右侧？

可以实现，只需给.sticky类添加margin-left: auto属性，同时保留原有的position: sticky和right: 0即可。

修改后的CSS代码 #

#container {
  overflow: scroll;
  display: flex;
  width: 100%;
  flex-direction: row;
  max-width: inherit;
  background-color: azure;
}

.item {
  min-width: 30px;
  min-height: 90px;
  background-color: green;
  border: 1px solid white;
}

.sticky {
  background-color: orange;
  position: sticky;
  right: 0;
  margin-left: auto; /* 新增属性 */
}

效果说明 #

• 当容器内item数量足够多（超出容器宽度）时，滚动容器，.sticky元素会始终固定在可视区域右侧，不会随滚动消失。
• 当容器内item数量不足时，margin-left: auto会自动把.sticky元素推到容器最右侧，不会停留在起始位置。

完整示例代码 #

<div id="container">
  <div class="item sticky"></div>
</div>
<div id="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item sticky"></div>
</div>

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