CSS实现窗体无滚动条滚动

前言：实现固定宽高的div内容可滚动，但是又不因为滚动条的出现，影响页面美观

常规情况下，固定宽高的div滚动，默认是有滚动条存在的

默认情况

可以通过设置webkit-scrollbar属性，隐藏掉滚动条

 div::-webkit-scrollbar{
        width:0px;
        opacity:0;
        -webkit-overflow-scrolling: touch;
    } 

这种方法简单，但是不兼容所有的浏览器，只能在使用webkit内核的有效

        

            

                
            
内容描述：水库的一号水位站
            

                
            
内容描述：水库的二号水位站
            

                
            
内容描述：水库的三号水位站
        
    

效果图

第二种方法

大致的思路是这样，因为原本的div默认情况下带有滚动条，我们可以在其外部套一层div。让外层的div宽度稍窄于内部的div一个滚动条的宽度，覆盖到内层div上，实现“隐藏”掉滚动条，这种方式就不用考虑兼容性问题。

        
 
        

            

                
            
内容描述：水库的一号水位站
            

                
            
内容描述：水库的二号水位站
            

                
            
内容描述：水库的三号水位站
        
    

效果图如下（Ps.白边是body背景）

效果图

整体来说，也不是特别麻烦。既解决了样式问题，也兼顾了兼容性。希望对你们能够有所帮助！