实现方式非常简单,只需要对应的CSS样式即可:
box-sizing: border-box;overflow-y: scroll;
其中,box-sizing属性是为了让盒子宽度包括border和padding,防止出现盒子漏出滚动条的情况;overflow-y属性是为了让盒子出现垂直方向滚动条,如果内容没有超出盒子高度,则不会出现滚动条。
下面是实现效果图:
从效果图可以看出,滚动条已经被挤出盒子内容区域之外了,不会挡住盒子右侧的内容了。
总结一下:
CSS挤出滚动条的实现非常简单,使用overflow-y: scroll;即可。同时,为了避免盒子宽度被滚动条挤压,可以使用box-sizing: border-box;让盒子宽度自适应。希望本篇文章对你有所帮助!