[分享]css只在固定范围滚动条

CSS是一门用于美化网站的语言，其中包括可以控制滚动条的样式。在有些情况下，我们只需要在网页的一部分区域内添加滚动条，而其他区域则不需要。这时，我们可以使用CSS只在固定范围内添加滚动条。首先，我们需...

CSS是一门用于美化网站的语言，其中包括可以控制滚动条的样式。在有些情况下，我们只需要在网页的一部分区域内添加滚动条，而其他区域则不需要。这时，我们可以使用CSS只在固定范围内添加滚动条。

首先，我们需要在HTML代码中添加一个包含内容的div，并设置其宽度和高度，以及overflow属性为auto。overflow属性的值为auto表示当内容超出容器范围时显示滚动条。

<div class="scrollable">
    <p>内容</p>
    <p>内容</p>
    ...
</div> 

接下来，在CSS中定义scrollable类，并设置其样式。要让滚动条只在该范围内出现，我们需要设置该类的overflow属性为auto，并同时为该类添加width和height属性。我们还可以自定义滚动条的样式，例如滚动条的颜色和宽度。

.scrollable {
    width: 300px;
    height: 200px;
    overflow: auto;
    scrollbar-color: blue red;
    scrollbar-width: thin;
} 

最后，我们只需要将内容添加到scrollable类中即可。此时，只有该div容器内的内容超出范围时，才会出现滚动条。其他区域则不受影响，页面仍然可以自由滚动。

总的来说，CSS只在固定范围内添加滚动条非常简单，只需设置对应的div容器的宽度和高度，以及overflow属性为auto即可。此时，页面的其他区域不受影响，用户体验也更佳。