纯css隐藏移动端滚动条解决方案（ios上流畅滑动）
生活随笔
收集整理的這篇文章主要介紹了
纯css隐藏移动端滚动条解决方案（ios上流畅滑动）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
html代碼展示（直接復制代碼保存至本地文件運行即可）：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>移動端隱藏滾動條解決方案</title><style type="text/css">* {padding: 0;margin: 0;}.container {height: 50px;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.nav {height: 100%;overflow-x: scroll;overflow-y: hidden;background-color: #999;}.con {width: 640px;height: 100%;display: flex;align-items: center;}.con>li {text-align: center;font-size: 16px;width: 80px;list-style: none;}.container ::-webkit-scrollbar {display: none;}</style> </head><body><div class="container"><nav class="nav"><ul class="con"><li>元素一</li><li>元素二</li><li>元素三</li><li>元素四</li><li>元素五</li><li>元素六</li><li>元素七</li><li>元素八</li></ul></nav></div> </body></html>設置滾動條隱藏： .container ::-webkit-scrollbar {display: none;}
此時效果已經實現，既可滑動對應元素的內容，也隱藏了滾動條。但是，ios上的滑動效果很不流暢，不利于用戶體驗，Android上是ok的；此時可以加上這樣一句css代碼（-webkit-overflow-scrolling: touch;），如下：
這時ios上滑動變得流暢了，但是又出現了一個新的問題，滾動條又重現了，如圖：
現在的需求是：既要不出現滾動條，又要滑動流暢，可以使用接下來一個小技巧：
因為滾動條是出現nav這個標簽元素上的，所以可以進行如下設置：**
PS：
1.nav的外層容器設置了固定高度，并且設置了內容溢出隱藏，所有nav的縱向的超出內容是不可見的，即：overflow:hidden;
2.padding-bottom等于20px并非固定值，只要你的設置的值大小足夠將滾動條擠出可視區域即可。
說明：根據步驟更改對應的css樣式，即可得出最終結果；也可直接訪問完整代碼：http://www.jianshu.com/p/f282b1cc24fb。
總結
以上是生活随笔為你收集整理的纯css隐藏移动端滚动条解决方案（ios上流畅滑动）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 分享几道经典的javascript面试题
- 下一篇： webpack 引入jquery和第三方