![使用CSS實現無滾動條滾動]()
我們都知道，擼頁面的時候當我們的內容超出了我們的div，往往會出現滾動條，影響美觀。
尤其是當我們在做一些導航菜單的時候。滾動條一出現就破壞了UI效果。 我們不希望出現滾動條，也不希望超出去的內容被放逐，就要保留鼠標滾動的效果。我們都知道overflow:hidden是可以隱藏滾動條的，但存在的問題是：頁面或元素失去了滾動的特性，進而溢出內容也變得不可見，這樣肯定是不可取的。百度下大部分都是在說overflow:hidden或者overflow-y:no可以解決問題，但是並不能很好的解決我們的問題，那麼怎麼辦呢？
接下來介紹幾種簡單的方法，但是也不是完美的解決問題了，各求所需吧
### 第一種：僞對象選擇器
在webkit內核的瀏覽器裏可以定義滾動條樣式。在CSS初始處定義
```css
::-webkit-scrollbar{
display:none;(或者是width: 0;)
}
```
不過目前本方法只在webkit內核瀏覽器中有效(Chrome,Safari)。
### 第二種：變相隱藏
大體思路是在div外面再套一個div。這個div設置`overflow:hidden`。而內容div設置`overflow-x: hidden;overflow-y: scroll;`然後再設置外層div的width小於內容div的width，就是用一個無滾動條的div包裹另一個有滾動條的div，從而實現隱藏滾動條的效果。
例子：
```html
使用CSS實現無滾動條滾動
- 測試數據1
- 測試數據2
- 測試數據3
- 測試數據4
- 測試數據5
- 測試數據6
- 測試數據7
- 測試數據8
- 測試數據9
- 測試數據10
- 測試數據11
- 測試數據12
- 測試數據13
- 測試數據14
- 測試數據15
- 測試數據16
- 測試數據17
- 測試數據18
- 測試數據19
- 測試數據20
- 測試數據21
- 測試數據22
- 測試數據23
- 測試數據24
- 測試數據25
- 測試數據26
- 測試數據27
- 測試數據28
- 測試數據29
- 測試數據30
```
之前的一個項目中用了iframe，有一個滾動條實在是醜，找了各種方法想去掉，最後用第二種方法把滾動條去掉了。 簡單總結下來。
這些並不一定能完美解決你的問題，或者你也可以使用插件來美化滾動條，這樣無疑也是一個好辦法。
