CSS實現窗體無滾動條滾動

前言:實現固定寬高的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背景)


效果圖
整體來說,也不是特別麻煩。既解決了樣式問題,也兼顧了兼容性。希望對你們能夠有所幫助!
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容