3種方法實現CSS隱藏滾動條並能夠滾動內容

時間  2019-11-10
標籤 方法 實現 css 隱藏 滾動條 並能 滾動 內容 欄目 CSS 简体版
原文   原文鏈接

隱藏滾動條的同時還須要支持滾動，咱們常常在前端開發中遇到這種狀況，最容易想到的是加一個iscroll插件，但其 實如今CSS也能夠實現這個功能，我已經在不少地方使用了，下面一塊兒看看這三種方法。css

方法1：計算滾動條寬度並隱藏起來html

在本站的側欄，你能夠看到前端日報的那塊內容並無滾動條，但鼠標移上去卻能夠滾動內容。這是什麼技術呢？ 其實我只是把滾動條經過定位把它隱藏了起來。前端

<!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>
View Code

下面給一個簡化版的代碼vue

<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>
View Code

這個代碼巧妙的向右移動了17個像素，恰好等於滾動條的寬度。這個值是我手動調試得來的。在chrome和IE沒發現問題。webpack

方法2：使用三個容器包圍起來，不須要計算滾動條的寬度

該代碼最先是在Microsoft博客上看到的，跟我上面的思路差很少，只不過人家裏面又加多了一個盒子，將內容限制在盒子裏面了。這樣子就看不到滾動條同時也能夠滾動。git

代碼以下：web

<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>
View Code

方法3：css隱藏滾動條面試

同時該文章還分享了一種經過CSS隱藏滾動條的方法，不過這個方法不兼容IE，作移動端的可使用。·ajax

那就是自定義滾動條的僞對象選擇器::-webkit-scrollbar，詳情請看以前的文章：CSS3自定義webkit滾動條樣式chrome

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>
View Code
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程