前言：實現固定寬高的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背景）
效果圖
整體來說，也不是特別麻煩。既解決了樣式問題，也兼顧了兼容性。希望對你們能夠有所幫助！
