CSS实现窗体无滚动条滚动
2017-11-15 本文已影响359人
流浪的三鮮餡
前言：实现固定宽高的div内容可滚动，但是又不因为滚动条的出现，影响页面美观
常规情况下，固定宽高的div滚动，默认是有滚动条存在的
默认情况
可以通过设置webkit-scrollbar属性，隐藏掉滚动条
div::-webkit-scrollbar{
width:0px;
opacity:0;
-webkit-overflow-scrolling: touch;
}
这种方法简单，但是不兼容所有的浏览器，只能在使用webkit内核的有效
<style>
div::-webkit-scrollbar{
width:0px;
opacity:0;
-webkit-overflow-scrolling: touch;
}
/*窗体样式*/
#div1 {
overflow-y:auto;
width:300px ;
height: 300px;
}
.img-responsive {
width:300px;
height:160px;
display:block;
}
</style>
<body>
<div id='div1'>
<div class='image'>
<img alt='image' class='img-responsive'>
</div>内容描述：水库的一号水位站
<div class='image'>
<img alt='image' class='img-responsive'>
</div>内容描述：水库的二号水位站
<div class='image'>
<img alt='image' class='img-responsive'>
</div>内容描述：水库的三号水位站
</div>
</div>
</body>
效果图
第二种方法
大致的思路是这样，因为原本的div默认情况下带有滚动条，我们可以在其外部套一层div。让外层的div宽度稍窄于内部的div一个滚动条的宽度，覆盖到内层div上，实现“隐藏”掉滚动条，这种方式就不用考虑兼容性问题。
<style>
/*内部窗体样式*/
#div1 {
overflow-y:auto;
width:300px ;
height: 300px;
position:absolute;
}
.img-responsive {
width:300px;
height:160px;
display:block;
}
/*外部窗体样式*/
#div2 {
width:282px ;
height: 282px;
background-color:yellow; /*背景色为了显示区别*/
overflow:hidden; /*溢出的内容隐藏掉*/
position:relative;
}
</style>
<body>
<div id='div2'>
<div id='div1'>
<div class='image'>
<img alt='image' class='img-responsive'>
</div>内容描述：水库的一号水位站
<div class='image'>
<img alt='image' class='img-responsive'>
</div>内容描述：水库的二号水位站
<div class='image'>
<img alt='image' class='img-responsive'>
</div>内容描述：水库的三号水位站
</div>
</div>
</body>
效果图如下（Ps.白边是body背景）
效果图
整体来说，也不是特别麻烦。既解决了样式问题，也兼顾了兼容性。希望对你们能够有所帮助！
