CSS实现隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个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
.element { overflow: -moz-scrollbars-none; }
CSS实现隐藏滚动条并可以滚动内容相关推荐
- CSS实现隐藏滚动条并可以滚动内容效果(三种方式)
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
- CSS实现隐藏滚动条但可以滚动
今天记录一个很小的问题,在工作之中会经常遇到的,当页面元素溢出的时候会产生滚动条,这个时候需要页面样式优化:CSS实现隐藏滚动条但是可以滚动. 通过设置高和voerflow,实现滚动条效果: . pa ...
- 实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
- CSS隐藏滚动条并可以滚动内容
隐藏滚动条常用方法 .container::-webkit-scrollbar {display:none} 为了兼容其他的浏览器,可以用这样的方法: 在滚动区域外再套一层div,给这层div设置ov ...
- CSS实现隐藏滚动条并保留滚动功能
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
- html+ul隐藏滚动条,2种方法实现CSS隐藏滚动条并可以滚动内容的方法
方法1:计算滚动条宽度并隐藏起来 html代码: Loremipsumdolorsitamet,consecteturadipiscingelit.Integervehiculaquamnibh,eu ...
- CSS实现隐藏滚动条但是可以滚动
代码 body::-webkit-scrollbar {display: none; } 示例 css选择器::-webkit-scrollbar {display: none; }
- css 隐藏滚动条 竖向y滚动,横向x不滚动
.bottom {overflow-x: hidden;overflow-y: scroll; } 参考博客: 3种方法实现CSS隐藏滚动条并可以滚动内容
- css-隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
最新文章
- AD ---- 活动目录的日常管理操作
- 简明高效的 Java 并发编程学习指南
- [crypto]-05-转载:PKCS #1 RSA Encryption Version 1.5介绍
- 松果出行CTO朱蓝天做客《智慧Talk》,解开共享电单车产研密码
- TPL Dataflow组件应对高并发,低延迟要求
- nodejs+supertest+mocha 接口测试环境搭建
- iOS开发问题之Could not instantiate class named NSLayoutConstraint
- app渗透实战案例—Spring Boot Actuator未授权到脱库
- 关于华为P9手机的解锁、刷Recovery、获取Root、安装Busybox,以及升级降级的全过程(和一些错误的解决方法)
- STM8 GPIO输入输出模式
- c语言岩石1ms,2017年注册岩土工程师基础考试真题下午和答案解析
- 电子计算机第一台视频,1946年2月14日世界上第一台计算机诞生
- 命主属性是水什么意思_​五行中,你属什么就是什么样的人!太准了~
- 联发科毫米波雷达解决方案芯片MT2706(Autus R10)
- 【51 Nod1378】夹克老爷的愤怒
- C++ 设计模式 建造者模式(复杂对象的构建与其表示分离)肯德基不同烧鸡的制作过程
- hdmi接口有什么用_VGA、DVI、HDMI三种视频信号接口有什么区别呢
- Ubuntu个人笔记
- 抑郁症患者突然心情变好,不一定是好事!
- 区块链电子合同铸就数字经济信任基石
热门文章
- 淄博烧烤、洛阳汉服......爆火,揭秘实体店客流爆满的秘诀!
- Kubernetes 是什么?
- 对接alipay支付遇到的问题
- 2023江西国际餐饮产业博览会/赣菜文化全国推介大会
- 缺少计算机所需的介质驱动程序w10,安装Win10系统提示“缺少电脑需要的媒体驱动”怎么办?...
- incognito 下料_Project Incognito为DeFi交易提供强大的隐私
- Linux shell 自动安装总结
- 微任务宏任务以及EventLoop详解
- MATLAB中smoothdata函数使用
- Naive Bayes(朴素贝叶斯)