隱藏滾動條的同時還需要支持滾動，我們經常在前端開發中遇到這種情況，最容易想到的是加一個iscroll插件，但其 實現在CSS也可以實現這個功能，我已經在很多地方使用了，下面一起看看這三種方法。
方法1：計算滾動條寬度並隱藏起來
在本站的側欄，你可以看到前端日報的那塊內容並沒有滾動條，但鼠標移上去卻可以滾動內容。這是什么技術呢？ 其實我只是把滾動條通過定位把它隱藏了起來。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="http://caibaojian.com/demo/reset.css"> <title>Document</title> <style type="text/css"> a { color: #333; text-decoration: none; } .daily-box { margin-left: -5px; height: 452px; overflow: hidden; position: relative; width: 360px; border: 1px solid #e6e6e6; border-radius: 4px; padding: 15px; } .daily-box ul { position: absolute; left: 0; padding-left: 5px; top: 0; bottom: 0; right: -17px; overflow: scroll; overflow-x: hidden; } .daily-box li { margin-bottom: 10px; line-height: 28px; } </style> </head> <body> <div class="daily-box"> <ul> <li class="active"> <a rel="bookmark" href="http://caibaojian.com/fe-daily-20180316.html" title="20180316 前端開發日報"> <span class="daily-title">20180316 前端開發日報</span><h3 class="daily-desc">canvas實現的前端壓縮裁剪工具；Typescript : 類 vs 接口；我的前端成長回顧；簡單理解JavaScript異步與回調；Ja...</h3> </a></li> <li> <a rel="bookmark" href="http://caibaojian.com/fe-daily-20180315.html" title="20180315 前端開發日報"> <span class="daily-title">20180315 前端開發日報</span><h3 class="daily-desc">Vue 2.0學習筆記：不同場景下組件間的數據通訊；Vue 組件的通信；ajax常見面試題；JS拾荒の字符串；React入門—r...</h3> </a></li> <li> <a rel="bookmark" href="http://caibaojian.com/fe-daily-20180314.html" title="20180314 前端開發日報"> <span class="daily-title">20180314 前端開發日報</span><h3 class="daily-desc">JS函數知識點梳理；從零開始搭建一個vue項目；vue 服務端渲染折騰記錄；網友搭了個《生活大爆炸》面部識別庫，可以用 face-recog...</h3> </a></li> <li> <a rel="bookmark" href="http://caibaojian.com/fe-daily-20180313.html" title="20180313 前端開發日報"> <span class="daily-title">20180313 前端開發日報</span><h3 class="daily-desc">2018年騰訊前端一面總結（面向2019屆學生）；天下無難試之 HTTP 協議面試刁難大全；10 個技巧，讓你更專業地使用 console ...</h3> </a></li> <li> <a rel="bookmark" href="http://caibaojian.com/fe-daily-20180312.html" title="20180312 前端開發日報"> <span class="daily-title">20180312 前端開發日報</span><h3 class="daily-desc">《你不知道的 JavaScript 上卷》 學習筆記；webpack詳解；Phaser 3.2.0 Kaori 發布，優秀的 HTML5 游...</h3> </a></li> <li> <a rel="bookmark" href="http://caibaojian.com/fe-daily-20180311.html" title="20180311 前端開發日報"> <span class="daily-title">20180311 前端開發日報</span><h3 class="daily-desc">我對知乎前端相關問題的十問十答 – 張鑫旭；CSS3進階：酷炫的3D旋轉透視；vue常見面試題；使用 vue-virtual-c...</h3> </a></li> </ul> </div> <script src="//caibaojian.com/demo/base.js"></script> </body> </html>
下面給一個簡化版的代碼
<div class="outer-container"> <div class="inner-container"> ...... </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; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> .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; } </style> </head> <body> <div class="outer-container"> <div class="inner-container"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <script src="//caibaojian.com/demo/base.js"></script> </body> </html>
這個代碼巧妙的向右移動了17個像素，剛好等於滾動條的寬度。這個值是我手動調試得來的。在chrome和IE沒發現問題。
方法2：使用三個容器包圍起來，不需要計算滾動條的寬度
該代碼最早是在Microsoft博客上看到的，跟我上面的思路差不多，只不過人家里面又加多了一個盒子，將內容限制在盒子里面了。這樣子就看不到滾動條同時也可以滾動。
代碼如下：
<div class="outer-container"> <div class="inner-container"> <div class="content"> ...... </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; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> .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; } </style> </head> <body> <div class="outer-container"> <div class="inner-container"> <div class="element"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies. Quisque vitae tincidunt purus. Vivamus feugiat bibendum erat, nec interdum urna porta sed. Nunc lobortis neque orci, ut suscipit nisl congue feugiat. Vivamus feugiat tellus quis cursus sollicitudin. Curabitur dolor massa, dictum ut ipsum in, porttitor pellentesque ante. Aenean egestas cursus tempor. Maecenas semper tortor sit amet egestas cursus. Mauris porttitor quis nisi ut tincidunt. Curabitur adipiscing eleifend nibh. Praesent mauris leo, consequat vitae orci eget, vestibulum bibendum nisi. Aliquam tempus diam ut tortor cursus, eget sodales augue adipiscing. Nulla at dignissim libero. </div> </div> </div> <script src="//caibaojian.com/demo/base.js"></script> </body> </html>
方法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; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> .element{ width: 200px; height: 200px; overflow: scroll; } .element::-webkit-scrollbar { width: 0 !important } .element { -ms-overflow-style: none; } .element { overflow: -moz-scrollbars-none; } </style> </head> <body> <div class="element"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies. Quisque vitae tincidunt purus. Vivamus feugiat bibendum erat, nec interdum urna porta sed. Nunc lobortis neque orci, ut suscipit nisl congue feugiat. Vivamus feugiat tellus quis cursus sollicitudin. Curabitur dolor massa, dictum ut ipsum in, porttitor pellentesque ante. Aenean egestas cursus tempor. Maecenas semper tortor sit amet egestas cursus. Mauris porttitor quis nisi ut tincidunt. Curabitur adipiscing eleifend nibh. Praesent mauris leo, consequat vitae orci eget, vestibulum bibendum nisi. Aliquam tempus diam ut tortor cursus, eget sodales augue adipiscing. Nulla at dignissim libero. </div> <script src="//caibaojian.com/demo/base.js"></script> </body> </html>