ios table滚动条隐藏隐藏滚动条css

转载

云端梦想家 2024-08-28 15:27:33

文章标签 ios table滚动条隐藏前端 javascript 面试 ViewUI 文章分类 iOS 移动开发

隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个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>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。