纯css隐藏移动端滚动条解决方案（ios上流畅滑动）
生活随笔
收集整理的這篇文章主要介紹了
纯css隐藏移动端滚动条解决方案（ios上流畅滑动）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
html代碼展示（直接復(fù)制代碼保存至本地文件運(yùn)行即可）：
<!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>設(shè)置滾動條隱藏： .container ::-webkit-scrollbar {display: none;}
此時效果已經(jīng)實(shí)現(xiàn)，既可滑動對應(yīng)元素的內(nèi)容，也隱藏了滾動條。但是，ios上的滑動效果很不流暢，不利于用戶體驗(yàn)，Android上是ok的；此時可以加上這樣一句css代碼（-webkit-overflow-scrolling: touch;），如下：
這時ios上滑動變得流暢了，但是又出現(xiàn)了一個新的問題，滾動條又重現(xiàn)了，如圖：
現(xiàn)在的需求是：既要不出現(xiàn)滾動條，又要滑動流暢，可以使用接下來一個小技巧：
因?yàn)闈L動條是出現(xiàn)nav這個標(biāo)簽元素上的，所以可以進(jìn)行如下設(shè)置：**
PS：
1.nav的外層容器設(shè)置了固定高度，并且設(shè)置了內(nèi)容溢出隱藏，所有nav的縱向的超出內(nèi)容是不可見的，即：overflow:hidden;
2.padding-bottom等于20px并非固定值，只要你的設(shè)置的值大小足夠?qū)L動條擠出可視區(qū)域即可。
說明：根據(jù)步驟更改對應(yīng)的css樣式，即可得出最終結(jié)果；也可直接訪問完整代碼：http://www.jianshu.com/p/f282b1cc24fb。
總結(jié)
以上是生活随笔為你收集整理的纯css隐藏移动端滚动条解决方案（ios上流畅滑动）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 分享几道经典的javascript面试题
- 下一篇： webpack 引入jquery和第三方