横向滚动列表紧贴屏幕边缘问题：原理分析与解决方案

问题背景

在移动端页面中，有一个横向滚动的卡片列表区域（scroll-view + 内部卡片列表）。需求是：滚动时，卡片可以一直滑动到屏幕的左右两侧边缘，不留任何残余间距。

但实际效果是：不管怎么滑动，卡片始终无法贴到屏幕边缘，看起来像是左右两侧有什么东西把内容"盖住"了一样。

问题分析

初始代码结构

html 复制代码

<view class="outer-wrap">
  <scroll-view class="scroll-view" scroll-x>
    <view class="scroll-list">
      <view class="scroll-item">...</view>
      <view class="scroll-item">...</view>
      <view class="scroll-item">...</view>
    </view>
  </scroll-view>
</view>

css 复制代码

.outer-wrap {
  margin: 70rpx 32rpx 0; /* 左右各 32rpx 的外边距 */
}

.scroll-view {
  width: 100%;
}

.scroll-list {
  display: inline-flex;
  gap: 20rpx;
  padding-right: 0;
}

根本原因

间距加在了外层容器 的 margin 上。

这导致 scroll-view 的实际可用宽度 = 屏幕宽度 - 左margin - 右margin，scroll-view 本身就已经被"缩进"了。无论内部内容怎么滚动，都永远在这个缩小后的宽度范围内运动，自然无法触及屏幕边缘。

makefile 复制代码

屏幕宽度:   |←------------------------------------------------------------------------------------→|
outer-wrap: |  ←------------------------------------------------------------------→  |  ← 左右各被 margin 缩掉了
scroll-view: 只能在这个范围内滚动，永远到不了屏幕边缘

解决方案

核心思路：把"间距的责任"从外层容器转移到内层滚动列表，让 scroll-view 自己撑满全屏宽度。

修改后的代码

css 复制代码

/* 第一步：去掉外层容器的左右 margin */
.outer-wrap {
  margin: 70rpx 0 0; /* 左右改为 0 */
}

/* 第二步：把间距下沉到内层列表的 padding */
.scroll-list {
  display: inline-flex;
  gap: 20rpx;
  padding-left: 32rpx;
  padding-right: 32rpx;
  box-sizing: content-box; /* 关键！*/
}

核心原理详解

1. 为什么要加 padding-left / padding-right？

去掉外层 margin 后，scroll-view 确实撑满了全屏，但第一张卡片会直接顶着屏幕左边缘，没有任何呼吸空间，视觉上太拥挤。

所以要把原来的 32rpx 间距"搬"到内层 .scroll-list 的 padding 上：

初始状态：第一张卡片距屏幕左边 32rpx（正常留白）
滚动到底：最后一张卡片距屏幕右边 32rpx（正常留白）
滚动过程中：卡片可以一路滑动到贴边，不会被外层容器截断

2. `box-sizing: content-box` 为什么是关键？

这里涉及 CSS 盒模型的核心概念。

CSS 中 box-sizing 有两个值：

值	含义
`border-box`（默认）	元素的 width/height 包含 padding 和 border
`content-box`	元素的 width/height 只计算内容区，padding 和 border 额外叠加

如果用 border-box（默认）会怎样？

scroll-view 宽度是 100%（撑满屏幕）。.scroll-list 作为其子元素，它的宽度也是 100%。

border-box 下，padding 被"算进"总宽度里：

scss 复制代码

scroll-list 总宽度 = 100%
内容区宽度 = 100% - padding-left(32rpx) - padding-right(32rpx)

这意味着内容区实际变窄了，卡片们被挤压在一个更小的区域里，padding 并没有"延伸"到可滚动范围之外------它只是在已有宽度里占了一块地方。结果还是贴不到边。

改成 content-box 后发生了什么？