一句话记住核心横向滚动贴边 = 外层容器去掉左右间距 + 间距下沉到内层列表 padding + 使用 box-sizing: content-box 把 padding 纳入可滑动范围。

在hen多小程序或 H5 项目里常会遇到这样一种需求：用户在手指划过时卡片Neng够一路滑到Zui左或Zui右，直接抵住手机的物理边框。kan似简单，却经常因为「外层留白」而导致卡片始终留有几像素的空隙。

典型的结构大概是：

    
        
            …
            …
            …
        
    

Ru果把「32rpx」的间距写在 .wrapper 的 margin 上，.scroll-view 本身就被压缩了几分之一，卡片再怎么滑，也只Neng在这块「被缩小」的区域里奔跑。

先把外层容器两侧的 margin 清零，让滚动视图直接占满整块宽度。随后把原本属于外层的留白转移到内部列表的 padding 中，这样视觉上仍保留呼吸空间，却不再限制滚动范围。

/* 原来的外层留白 */
.wrapper{
    /* margin: 70rpx 32rpx; ← 要改 */
}
/* 改后：去掉左右 margin，只保留上下 */
.wrapper{
    margin:70rpx 0;
}
/* 内层列表负责留白 */
.list{
    display:inline-flex;          /* 横向排列 */
    gap:20rpx;                    /* 卡片之间的距离 */
    padding-left:32rpx;          /* 左侧呼吸区 */
    padding-right:32rpx;         /* 右侧呼吸区 */
}

默认情况下大多数项目dou会使用 box-sizing:border-box，这意味着元素宽度Yi经把 border 与 padding 包含进去。此时即使我们给内部列表加了 padding，实际占用宽度并不会超出父容器，从而仍然出现「卡片不Neng触及两端」的问题。

关键点在于把盒模型切换为 content-box——让宽度只算内容本身，padding 会额外伸展到可滚动区域之外。

.list{
    box-sizing:content-box;   /* 核心！让 padding 跨出内容宽度 */
}

只有当滚动容器真正撑满屏幕宽度时上一步才会生效。下面是一段完整示例：

    
        
            卡片1
            卡片2
            卡片3
            ……
        
    

border-box元素总宽 = 内容宽 + 边框 + 内填充。于是即便我们给内部列表添加了左/右 padding，它们也被算进了元素本身的宽度，不会导致父容器检测到「内容超出」而扩大可滚动范围。

content-box元素总宽仅等于内容宽，padding 会额外占据空间。当浏览器计算 scroll-view 的 scrollWidth 时会把这部分额外空间计入，从而让用户Ke以把第一张卡片一直拖到屏幕左端，同理拖到Zui右端也不例外。