css滚动条不占用宽度 |做过美工会html css js

通常情况下，大家可以通过以下代码来隐藏滚动条：

body::-webkit-scrollbar {
display: none;
}

这段代码可以让Chrome浏览器下的滚动条不再显示，但是它仍然会占用网页的宽度。

那么，该怎样解决这个问题呢？实际上，大家可以通过使用自定义滚动条样式来解决这个问题。

首先，大家需要定义一个包含滚动条样式的CSS类，例如：

.scrollbar {
overflow-y: scroll;
scrollbar-width: none;
}
.scrollbar::-webkit-scrollbar {
display: none;
}
.scrollbar::-webkit-scrollbar-thumb {
background-color: #aaa;
}

这段代码实现了以下功能：

• 定义了一个CSS类scrollbar，其中overflow-y为scroll表示当内容溢出容器时，显示滚动条。
• scrollbar-width为none表示隐藏浏览器的默认滚动条。
• display为none表示隐藏webkit内核下的滚动条。
• 定义了滚动条的样式，这里只是设置了滚动条轨道的背景颜色。

接下来，大家只需要在需要显示滚动条的元素上添加scrollbar类即可，如：

<div class="scrollbar">
<p>这里是需要显示滚动条的内容。</p>
</div>

这样，滚动条就会被自定义样式所取代，同时也不会占用网页的宽度。

总的来说，通过自定义滚动条样式，大家可以很方便地解决滚动条占用宽度的问题，同时也为网页的美化提供了更多的可能性。