如何让粘性按钮在水平滚动容器中固定左右并设置top位置

问题分析 #

1. 按钮sticky不生效：原.container设置了overflow-x: hidden，且内部采用white-space: nowrap的inline布局，导致sticky的作用范围被限制在.container内，而容器本身无垂直滚动，因此top属性无法触发粘性效果。
2. 高亮空白区域：原.scrollable-content使用inline-block布局，商品总宽度不足容器宽度时会出现背景色填充的空白；同时重复设置的margin-right也造成了布局冗余。

解决方案代码修改 #

HTML代码（结构无需调整） #

<div style="height: 400px; background-color: darkgoldenrod"></div>
<div class="container" #widgetsContent>
  <button class="button-left" (click)="scrollLeft()">Left Button</button>
  <div class="scrollable-content">
    @for(p of products; track p){
    <div class="item" appDraggable>
      <div class="image-container">
        <img
          class="image"
          src="https://img1.forestessentialsindia.com/pub/media/catalog/product/cache/0ee050c3ffc3555709b9bb6062f4d7e9/2/1/21324-kesanta-advanced-hair-growth-serum-50ml-front_1.png"
        />
      </div>
      <div class="content-container">
        <div class="name">{{ p.name }}</div>
        <div class="review">
          <app-star-rating [rating]="p.rating"></app-star-rating>
        </div>
        <div class="review-count">{{ p.reviewCount }} Reviews</div>
        <div class="price">{{ p.price }}</div>
        <mat-toolbar style="background-color: transparent; padding: 0px">
          <button mat-flat-button>ADD TO CART</button>
          <span class="spacer"></span>
          <button mat-icon-button>
            <mat-icon>favorite</mat-icon>
          </button>
        </mat-toolbar>
      </div>
    </div>
    }
  </div>
  <button class="button-right" (click)="scrollRight()">Right Button</button>
</div>

CSS代码修改 #

.container {
  position: relative;
  width: 100%;
  overflow-x: auto; /* 替换overflow-x:hidden，实现商品区域水平滚动 */
  overflow-y: visible; /* 垂直方向不裁剪，让sticky按钮基于视口生效 */
  padding: 10px;
  display: flex; /* 使用flex布局，让按钮和商品区域横向排列 */
  align-items: flex-start; /* 顶部对齐按钮与商品 */
  gap: 10px; /* 按钮与商品区域的间距 */
}

.button-left {
  position: sticky;
  top: 20px; /* 垂直滚动时固定的视口位置 */
  left: 15px; /* 对应container的padding，保持按钮与容器左侧的偏移 */
  z-index: 999;
  background-color: #f0f0f0;
  padding: 5px 10px;
  flex-shrink: 0; /* 防止按钮被压缩变形 */
  height: 40px; /* 固定高度，避免布局偏移 */
}

.button-right {
  position: sticky;
  top: 20px;
  right: 15px; /* 对应container的padding，保持按钮与容器右侧的偏移 */
  z-index: 999;
  background-color: #f0f0f0;
  padding: 5px 10px;
  flex-shrink: 0;
  height: 40px;
}

.scrollable-content {
  flex: 1; /* 填充容器剩余宽度 */
  display: flex; /* 用flex布局排列商品 */
  gap: 12px; /* 商品之间的间距，替代冗余的margin-right */
  /* 若不需要背景色高亮可移除此行，空白区域会自动消失 */
  /* background-color: antiquewhite; */
}

.item {
  flex-shrink: 0; /* 防止商品宽度被压缩 */
  width: 275px;
  height: 415px;
  background-color: rgb(244, 244, 244);
  border: 1px solid rgb(226, 226, 226);
}

关键修改说明 #

• 容器布局优化：改用flex布局实现按钮与商品区域的横向排列，设置overflow-x: auto开启商品水平滚动，overflow-y: visible让sticky按钮的粘性参考视口而非容器。
• 按钮粘性修复：添加flex-shrink: 0避免按钮被压缩，明确设置top、left/right值，确保垂直滚动时固定在视口指定位置，水平方向始终停留在容器两侧。
• 空白区域处理：用gap替代商品的margin-right，消除最后一个商品的多余间距；若不需要背景色高亮，直接移除.scrollable-content的背景色即可彻底消除空白高亮。

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