纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题
2023-09-11 14:19:54 时间
当我们的内容超出了我们的div,往往会出现滚动条,影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。
这里介绍一个简单的方法:大体思路是在div外面再套一个div。这个div设置overflow:hidden,而内容div设置 overflow-y: scroll;overflow-x: hidden;
然后再设置外层div的width小于内层div的width。
这个内层div其实是会出现滚动条的,所以不影响鼠标的滚动效果,而且我们看不到滚动条了。
//css代码
.nav_wrap{
height: 400px;
width: 200px;
overflow: hidden;
border: 1px solid #ccc;
margin: 20px auto;
}
.nav_ul{
height: 100%;
width: 220px;
overflow-y: auto;
overflow-x: hidden;
}
//html代码
<div class= "nav_wrap">
<ul class= "nav_ul">
<li class="nav_li">我是菜单1</li>
<li class="nav_li">我是菜单2</li>
</ul>
</div>
这样的好处是兼容所有浏览器。
下面介绍对各种浏览器进行的scroll-bar设置,这种就是兼容性不大好,对火狐不起作用
/*webkit内核*/
.scroll_content::-webkit-scrollbar {
width:0px;
height:0px;
}
.scroll_content::-webkit-scrollbar-button {
background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-track {
background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-track-piece {
background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-thumb{
background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-corner {
background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-resizer {
background-color:rgba(0,0,0,0);
}
/*o内核*/
.scroll_content .-o-scrollbar{
-moz-appearance: none !important;
background: rgba(0,255,0,0) !important;
}
.scroll_content::-o-scrollbar-button {
background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-track {
background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-track-piece {
background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-thumb{
background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-corner {
background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-resizer {
background-color:rgba(0,0,0,0);
}
/*IE10,IE11,IE12*/
.scroll_content{
-ms-scroll-chaining: chained;
-ms-overflow-style: none;
-ms-content-zooming: zoom;
-ms-scroll-rails: none;
-ms-content-zoom-limit-min: 100%;
-ms-content-zoom-limit-max: 500%;
-ms-scroll-snap-type: proximity;
-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
-ms-overflow-style: none;
overflow: auto;
}
所以还是选第一种吧,简单好用,哈哈
相关文章
- ASP.NET MVC Filters 4种默认过滤器的使用【附示例】 数据库常见死锁原因及处理 .NET源码中的链表 多线程下C#如何保证线程安全? .net实现支付宝在线支付 彻头彻尾理解单例模式与多线程 App.Config详解及读写操作 判断客户端是iOS还是Android,判断是不是在微信浏览器打开
- win10联通INTERNET网络后,禁止自动打开浏览器页面
- 【Css/Html】网页Css默认设计样式载入模板代码body.css
- 火狐浏览器信息提取工具Dumpzilla
- ubuntu 本地生成被浏览器信任的证书
- chrome浏览器插件开发经验(一)
- vue项目js和css文件名避免浏览器缓存再vue.config.js中配置
- 《HTML与CSS入门经典(第8版)》——1.5 用多种Web浏览器测试
- PySe-003-Se-WebDriver 启动浏览器之一 - Firefox
- 浏览器网页翻译插件选十大翻译器网页翻译插件
- 浏览器厂商开始默认支持WebAssembly格式
- 解决CSS浏览器兼容性问题的一些方案浅析
- css Table布局:基于display:table的CSS布局
- 浏览器工作原理:浅析Chrome 架构 - 打开了 1 个页面为什么有 4 个进程
- webpack高级概念,webpack与浏览器的缓存,打包文件hash命名(系列九)
- 浏览器与Node的事件循环(Event Loop)有何区别?
- CSS学习知识整理(一)Css 简介、语法与创建
- CSS学习知识整理(一)Css 布局
- cef3 获得 谷歌浏览器 网页源码 哈哈
- 如何调试CSS的跨浏览器样式bug
- 再谈浏览器兼容性测试
- Mozilla发布Servo浏览器每日构建版