css隐藏滚动条方法

我们在前端开发过程中经常会遇到这种情况,在一小块的内容上会加上滚动条,但是为了美观我们会隐藏滚动条还需要支持滚动,最容易的办法就是使用iscroll插件来实现,但这不是我们想要的,细想一下,现在css其实就可以实现这个功能,经过我深思熟虑后,想到了3中比较好的方法,亲测可以使用,并完美兼容。

一、通过计算滚动条的宽度来隐藏

HTML代码

<div class="outer-container">
    <div class="inner-container">
    ......
    </div>
</div>

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;
}

这个代码巧妙的向右移动了17个像素,刚好等于滚动条的宽度。这个值是我手动调试得来的。在chrome

和IE没发现问题。

二、CSS隐藏滚动条

这个方法完美支持Chrome、Safari、IE10+、Firefox,但是不兼容IE低版本的,不过做移动端的可以使用。

原理就是那就自定义滚动条的伪对象选择器::-webkit-scrollbar

chrome 和Safari

.element::-webkit-scrollbar { width: 0 !important }

IE 10+

.element { -ms-overflow-style: none; }

Firefox

.element { overflow: -moz-scrollbars-none; }

HTML代码

<div class="element"></div>

css代码

.element{
width: 200px;
height: 200px;
overflow: scroll;
}

.element::-webkit-scrollbar { width: 0 !important }
.element { -ms-overflow-style: none; }
.element { overflow: -moz-scrollbars-none; }

三、使用三个容器包围起来,不计算滚动条宽度

该代码是我最早一篇博客上看到的,感觉不错就记录下来的,跟我上面的提到的思路差不多,只不过人家里面又加多了一个盒子,将内容限制在盒子里面了。这样子就看不到滚动条同时也可以滚动。

HTML代码

<div class="outer-container">
    <div class="inner-container">
        <div class="content">
        ......
       </div>
    </div>
</div>

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;
}

结束语

以上就是码云笔记今天为大家带来的css实现的隐藏滚动条并可以滚动内容的全部代码,在项目中经常用到,希望对大家有用。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » css隐藏滚动条方法

发表评论