css滚动条不占用宽度

/* css滚动条不占用宽度 */

/* 1. 使用 ::-webkit-scrollbar 隐藏滚动条 */
body {
  /* 隐藏滚动条，但仍然可以滚动 */
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 和 Edge */
}

body::-webkit-scrollbar {
  display: none; /* Chrome, Safari 和 Opera */
}

/* 2. 使用 padding 和 margin 调整布局 */
.container {
  padding-right: 17px; /* 假设滚动条宽度为 17px */
  box-sizing: border-box;
}

/* 3. 使用 CSS 变量和 calc() 动态调整宽度 */
:root {
  --scrollbar-width: 17px;
}

.content {
  width: calc(100% - var(--scrollbar-width));
}

解释说明：

1. 隐藏滚动条：

   • 使用 ::-webkit-scrollbar 伪元素可以隐藏滚动条，同时保持页面的滚动功能。对于不同浏览器，使用特定的属性如 scrollbar-width 和 -ms-overflow-style 来兼容。

2. 调整布局：

   • 通过给容器添加 padding-right，可以确保内容不会被滚动条遮挡。这里假设滚动条的宽度为 17px，可以根据实际情况调整。

3. 动态调整宽度：

   • 使用 CSS 变量和 calc() 函数可以更灵活地处理不同宽度的滚动条。通过定义一个变量 --scrollbar-width，可以在多个地方复用这个值，并且方便修改。

这样设置后，滚动条不会影响页面的布局，也不会占用额外的宽度。