不同系统对浏览器滚动条的处理方式不一样，为了统一表现会使用 CSS 自定义滚动条👇

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  border-color: transparent;
  border-style: solid;
  border-width: 2px;
  border-radius: 100px;
  background: rgba(73, 79, 87, 0.2);
  background-clip: padding-box;
}

这就导致了滚动条会占据网页的实际宽度，尤其是动态获取的列表需要保证表现一致

• overflow: auto 不会预留滚动条宽度，滚动条出现时挤压内容，造成表现不一样
• overflow: scroll 总是预留滚动条的宽度，子元素高度不够时仍然预留滚动条的宽度，但是没有实际页面表现

文档：overflow - CSS: Cascading Style Sheets | MDN (mozilla.org) 演示：Prevent scrollbar Layout Shift (codepen.io)