实现CSS隐藏滚动条并可以滚动内容
CSS 实现 可以 内容 隐藏 滚动 滚动条
2023-09-27 14:26:14 时间
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法。
方法1:计算滚动条宽度并隐藏起来
在本站的侧栏,你可以看到前端日报的那块内容并没有滚动条,但鼠标移上去却可以滚动内容。这是什么技术呢? 其实我只是把滚动条通过定位把它隐藏了起来。·
下面给一个简化版的代码:
<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;
这个代码巧妙的向右移动了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;
}
方法3:css隐藏滚动条
同时该文章还分享了一种通过CSS隐藏滚动条的方法,不过这个方法不兼容IE,做移动端的可以使用。
那就是自定义滚动条的伪对象选择器::-webkit-scrollbar,详情请看之前的文章:CSS3自定义webkit滚动条样式
chrome 和Safari
.element::-webkit-scrollbar { width: 0 !important }
IE 10+
.element { -ms-overflow-style: none; }
Firefox
//code from http://caibaojian.com/hide-scrollbar.html
.element { overflow: -moz-scrollbars-none; }
相关文章
- uniapp - sunui.css
- 纯 CSS 实现波浪效果!
- 【Css】Css实现div卡片【横向滑动】效果(图文+完整源代码)
- CSS - display flex 弹性布局实现一行仅显示 2 个,每行显示指定个数(设置 space-between / space-around 超出自动换行)详细示例代码
- CSS设置盒子容器(div)高度(height)始终为100%
- CSS: inline-block 间隙
- css+js实现兼容性select的样式
- css content
- 【黑马程序员pink名师讲CSS】学好CSS有这一篇就够了(CSS笔记)
- css的hover事件,如果点击之后通过js操作样式,hover事件就会失效的处理方法,外部css样式与js的DOM样式谁的权重高?
- 《Web前端开发精品课 HTML与CSS进阶教程》——第一部分 HTML进阶第01章 HTML基础知识1.1 HTML和CSS进阶简介
- 《HTML与CSS入门经典(第8版)》——2.3 理解Web服务器上放置文件的位置
- 基于HTML+JavaScript+CSS实现教学网站【100010186】
- 纯CSS如何实现状态圆点
- css如何实现水平垂直居中
- JS动态监听用户行为事件,并且添加CSS动画的实现
- 纯Css实现Div高度根据自适应宽度(百分比)调整
- 有趣的HTML实例(十五) 注册登录界面(css+js)
- Css实现checkbox及radio样式自定义
- CSS代码实现提示气泡效果
- css实现遮罩层(解决透明背景上的文字不透明)
- 浅析纯css实现虚线渐变边框的2种方式:反向镂空与mask遮罩
- css中的莫名空白间隙
- C#实现winform仿div+css半透明遮罩效果
- CSS:实现动态流光线条效果/动态流光线条颜色渐变效果
- css img引入的图片宽高固定 不想让图片变形