如何为同一容器内的mask div设置特定边距并修复滚动条重叠问题

1. 单独为mask类div设置特定margin，使其宽度小于root容器 #

完全可以实现，以下是两种常用方案：

• 利用margin直接压缩宽度：通过给.mask设置左右margin，让它的总宽度自动小于父容器root

.root {
  width: 300px;
}
.mask {
  /* 左右各留20px间距，总宽度比root少40px */
  margin: 0 20px;
}

• 用calc()精准定义宽度：直接计算.mask的宽度，结合margin实现更灵活的布局

.root {
  width: 300px;
}
.mask {
  width: calc(100% - 40px);
  margin: 0 auto; /* 可选，让mask在root内水平居中 */
}

2. 修复shimmer div与滚动条重叠的问题 #

核心思路是让shimmer的宽度避开滚动条的占位区域，以下是三种可行方案：

• 给mask添加右侧内边距：如果需要保留滚动条交互，给mask加足够的右侧内边距，让shimmer不会延伸到滚动条下方

.mask {
  overflow: auto;
  padding-right: 15px; /* 数值根据滚动条实际宽度调整，一般10-15px即可 */
}
.shimmer {
  width: 100%;
}

• 使用overflow: clip替代auto：如果不需要用户滚动mask区域，用overflow: clip可以让内容不超出容器，同时隐藏滚动条

.mask {
  overflow: clip;
}
.shimmer {
  width: 100%;
}

• 固定滚动条宽度后计算shimmer宽度：针对支持scrollbar-width属性的现代浏览器，先固定滚动条宽度，再用calc计算shimmer的可用宽度

.mask {
  overflow: auto;
  scrollbar-width: thin; /* 设为thin或具体数值 */
}
.shimmer {
  width: calc(100% - 8px); /* 8px对应thin滚动条的大致宽度 */
}

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