React Virtualized Lists实现带水平内边距列表项的最优方案咨询

推荐方案1：使用 scrollbar-gutter + 容器内边距 #

该方案不需要修改列表项结构，也不会改动库传递的样式参数：

• 给列表外层容器设置水平内边距：padding-inline: 16px（数值按需调整）
• 同时给容器添加 scrollbar-gutter: stable 规则，该属性会提前为滚动条预留固定位置，滚动条生成后会自动贴合容器最右侧，不会占用内容区域宽度
• 列表项直接使用库传递的100%宽度样式即可，内容会自动避开容器的内边距区域

推荐方案2：列表项盒模型调整 #

该方案完全不改动外层容器结构：

• 给每个列表项添加 box-sizing: border-box 规则
• 直接在列表项上设置水平内边距：padding-left: 16px; padding-right: 16px（数值按需调整）
• 库传递的 width: 100% 会基于border-box盒模型计算，内边距会被包含在100%宽度范围内，不会撑出横向滚动条，纵向滚动条始终贴合容器最右侧，不需要新增额外DOM节点

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