好程式設計師web前端教程分享3種方法實現CSS隱藏捲軸並可以滾動內容

好程式設計師 web 前端教程分享 3 種方法實現 CSS 隱藏捲軸並可以滾動內容 ， 隱藏捲軸的同時還需要支援滾動，我們經常在前端開發中遇到這種情況，最容易想到的是加一個 iscroll 外掛，但其實現在 CSS 也可以實現這個功能，我已經在很多地方使用了，下面一起看看這三種方法。

 

方法 1 ：計算捲軸寬度並隱藏起來

 

在本站的側欄，你可以看到前端日報的那塊內容並沒有捲軸，但滑鼠移上去卻可以滾動內容。這是什麼技術呢？ 其實我只是把捲軸透過定位把它隱藏了起來。

 

下面給一個簡化版的程式碼

 

<div>

    <div>

     ......

    </div>

</div>

.outer-container{

width: 360px;

height: 200px;

position: relative;

overflow: hidden;

}

.inner-container{

position: absolute;

left: 0;

top: 0;

right: -17px;

bottom: 0;

overflow-x: hidden;

overflow-y: scroll;

}

 

這個程式碼巧妙的向右移動了 17 個畫素，剛好等於捲軸的寬度。這個值是我手動除錯得來的。在 chrome 和 IE 沒發現問題。

 

方法 2 ：使用三個容器包圍起來，不需要計算捲軸的寬度

 

該程式碼最早是在 其他 部落格上看到的，跟上面的思路差不多，只不過人家裡面又加多了一個盒子，將內容限制在盒子裡面了。這樣子就看不到捲軸同時也可以滾動。

 

程式碼如下：

 

 <div>

     <div>

        <div>

            ......

        </div>

     </div>

 </div>

.element, .outer-container {

  width: 200px;

  height: 200px;

}

 

.outer-container {

  border: 5px solid purple;

  position: relative;

  overflow: hidden;

}

 

.inner-container {

  position: absolute;

  left: 0;

  overflow-x: hidden;

  overflow-y: scroll;

}

 

.inner-container::-webkit-scrollbar {

  display: none;

}

 

方法 3 ： css 隱藏捲軸

 

同時該文章還分享了一種透過 CSS 隱藏捲軸的方法，不過這個方法不相容 IE ，做移動端的可以使用。

 

那就是自定義捲軸的偽物件選擇器 ::-webkit-scrollbar ，詳情請看之前的文章： CSS3 自定義 webkit 捲軸樣式

 

chrome 和 Safari

 

.element::-webkit-scrollbar { width: 0 !important }

IE 10+

 

.element { -ms-overflow-style: none; }

Firefox

 

.element { overflow: -moz-scrollbars-none; }