html overflow隐藏滚动条,css隐藏滚动条方法
我们在前端开发过程中经常会遇到这种情况,在一小块的内容上会加上滚动条,但是为了美观我们会隐藏滚动条还需要支持滚动,最容易的办法就是使用iscroll插件来实现,但这不是我们想要的,细想一下,现在css其实就可以实现这个功能,经过我深思熟虑后,想到了3中比较好的方法,亲测可以使用,并完美兼容。
一、通过计算滚动条的宽度来隐藏
HTML代码
......
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代码
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代码
......
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实现的隐藏滚动条并可以滚动内容的全部代码,在项目中经常用到,希望对大家有用。
html overflow隐藏滚动条,css隐藏滚动条方法相关推荐
- html自动移动滚动条,css隐藏移动端滚动条并平滑滚动
HTML代码如下 移动端隐藏滚动条解决方案 *{ padding:0; margin:0; } .par-type{ height:50px; -webkit-box-sizing:border-bo ...
- html页面不显示横向滚动条,css横向滚动条不显示?
在html页面开发时,我们经常会使用到css来设置页面的样式,当页面出现横向滚动条时,用css怎么将其清除掉?下面我们来看一下css设置横向滚动条不显示的方法. css可以通过为元素添加overflo ...
- html上下滑动css样式,网页滚动条CSS样式
网页滚动条CSS样式 滚动条样式主要涉及到如下CSS属性: overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容 overflow: auto; 在需要时内容会自动添加滚动 ...
- html css 滚动条,网页滚动条CSS样式
网页滚动条CSS样式 滚动条样式主要涉及到如下CSS属性: overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容 overflow: auto; 在需要时内容会自动添加滚动 ...
- css实现滚动条美化功能
最近在给客户做一个运维管理平台,前端有个地方的滚动条特别丑,当时也没在意这些细节,项目上线几个月后我实在受不了这个滚动条了,我在网上东找西找,轻轻松松改好了. 一.美化滚动条CSS /*定义滚动条高宽 ...
- CSS隐藏滚动条的方法
方法一: 纯CSS+div样式隐藏. 在需要滚动的元素外面再套一个div,给最外面的div设置样式overflow:hidden,宽度比需要滚动的元素小: 之后给需要滚动的元素设置样式overflow ...
- 实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
- 【前端大概一分钟】css隐藏滚动条同时可以滚动
1. 通过 ::-webkit-scrollbar 伪元素 .inner-container::-webkit-scrollbar {display: none; } 复制代码 简单粗暴,但是兼容性不 ...
- 如果不需要CSS隐藏滚动条
本文翻译自:CSS hide scroll bar if not needed I am trying to figure out how I can hide the overflow-y:scro ...
最新文章
- Spring中的Controller ,Service,Dao是不是线程安全的?
- 请确保 ASP.NET State Service (ASP.NET 状态服务)已启动,并且客户端端口与服务器端口相同...
- linux shell ascii 字符 转换
- Java 14 可能带来什么新特性?
- 浦发银行招聘计算机类笔试题,2019浦发银行招聘计算机模拟试题及答案
- mysql外键引用语法_mysql – 外键语法
- java 条码识别_条码识别示例代码
- 【多线程】创建多少线程才是合适的
- 如何避免单元测试陷阱?
- [Xcode 实际操作]一、博主领进门-(15)读取当前应用的信息
- 面试 AI 算法岗,你被要求复现顶会了嘛?
- 【Linux】X window与文本模式的切换
- 类__slots__与__dict__用法
- hmcl手机版下载_最新HMCL下载地址
- 破解日记 WiFi密码跑字典暴力破解 尽可能通俗易懂的版本
- CS231n 课程笔记翻译
- IDEA破解码(至2099)
- AutoRunner 功能自动化测试项目实训之第一个实战案例(四)
- 优酷mac版视频怎么转码,如何将kux格式转成mp4格式
- 华硕BIOS TPM设置
热门文章
- java object toarray_java从toArray返回Object[]到泛型的类型擦除
- 蓝牙运动耳机排行榜,好用有保障的运动耳机分享
- 鸿蒙oppo vivo,华为鸿蒙成功的关键:要让小米、OPPO、VIVO都用上鸿蒙
- 【Windows程序设计作业1】C#模拟信用卡还款
- Android Studio工具栏不见了的解决方法
- opendaylight-O版本与openstack集成
- 在js中实现while,sleep的方法
- Android使用Face++架构包实现人脸识别
- ❤ ❤分享一个WEB前端canvas鼠标滑过星空背景特效超好看❤ ❤
- 我的世界服务器工业无限电,我的世界Minecraft工业服务器1.7.10