如何让容器滚动条从padding结束位置开始，同时保留padding避免阴影被裁剪？

我有一个横向滚动容器，设置了水平padding来避免内部卡片的阴影被裁剪，但这会导致滚动条的起始位置过于靠左。

期望在保留padding的前提下，滚动条的起始位置对齐第一张卡片的左侧，效果如下：

原布局代码如下：

原CSS代码 #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

p {
  text-align: center;
  margin: 20px 0 10px;
}

.container {
  border: 1px solid;
  width: 500px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
  overflow: auto;
  padding: 10px 0;
}

.horizontal-padding {
  padding-left: 30px;
  padding-right: 30px;
}

.content {
  box-shadow: 0 0 5px 0;
  flex: 0 0 100px;
}

原HTML代码 #

<p>当前布局：设置了padding，滚动条起始位置过于靠左</p>
<div class="container horizontal-padding">
  <div class="content">Sample Content</div>
  <div class="content">Sample Content</div>
  <div class="content">Sample Content</div>
  <div class="content">Sample Content</div>
  <div class="content">Sample Content</div>
  <div class="content">Sample Content</div>
</div>

<p>无padding布局：滚动条起始位置对齐内容，但阴影被裁剪</p>
<div class="container">
  <div class="content">Sample Content</div>
  <div class="content">Sample Content</div>
  <div class="content">Sample Content</div>
  <div class="content">Sample Content</div>
  <div class="content">Sample Content</div>
  <div class="content">Sample Content</div>
</div>

解决方法 #

方法1：使用scroll-padding属性（优先使用） #

scroll-padding是CSS原生滚动对齐属性，专门用于调整滚动容器的滚动触发位置，不会改变容器原有的可视padding区域，刚好匹配需求。只需给带padding的滚动容器添加一行样式即可：

.container.horizontal-padding {
  scroll-padding-left: 30px;
  /* 滚动到最右侧时要对齐最后一张卡片的话，同步添加 scroll-padding-right: 30px; */
}

该方案无需修改DOM结构，代码改动量最小，兼容性覆盖95%以上的现代浏览器。

方法2：嵌套容器结构（兼容老旧浏览器） #

如果需要兼容低版本浏览器，可以通过两层容器拆分实现：外层容器保留水平padding用来容纳卡片阴影，内层容器负责滚动，不设置水平padding。

新增CSS样式

/* 外层容器，负责边框、水平padding，不处理滚动 */
.container-wrap {
  border: 1px solid;
  width: 500px;
  margin: 0 auto;
  padding: 10px 30px;
}
/* 内层滚动容器，负责横向滚动，无水平padding */
.scroll-inner {
  display: flex;
  gap: 10px;
  overflow: auto;
}

替换后的HTML结构

<p>优化后布局：保留padding且滚动位置对齐第一张卡片</p>
<div class="container-wrap">
  <div class="scroll-inner">
    <div class="content">Sample Content</div>
    <div class="content">Sample Content</div>
    <div class="content">Sample Content</div>
    <div class="content">Sample Content</div>
    <div class="content">Sample Content</div>
    <div class="content">Sample Content</div>
  </div>
</div>

外层的水平padding会完整容纳卡片阴影，内层滚动容器的滚动起始位置自然和第一张卡片左侧对齐。

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