使用CSS隐藏元素滚动条
如何隐藏滚动条,同时仍然可以在任何元素上滚动?
首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可。想要完全隐藏滚动条只需设置overflow:hidden即可,但是这样一来将导致元素内容不可滚动。时至今日,还没有任何一条CSS规则可以使元素可以隐藏滚动条的同时依然可以滚动内容,只能通过针对特定浏览器设置滚动条样式来实现。
Firefox浏览器
对于Firefox,我们可以将滚动条宽度设置为none:
scrollbar-width: none; /* Firefox */
IE浏览器
对于IE,我们需要使用-ms-prefix属性定义滚动条样式:
-ms-overflow-style: none; /* IE 10+ */
Chrome和Safari浏览器
对于Chrome和Safari浏览器,我们必须使用CSS滚动条选择器,然后使用display:none隐藏它:
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
注意:当你要隐藏滚动条的时候,最好将overflow显示设置为auto或者scroll保证内容是可滚动的。
示例
我们使用上面的CSS属性以及溢出实现下面一个实例——隐藏水平滚动条,同时允许垂直滚动条:
.demo::-webkit-scrollbar {
display: none; /* Chrome Safari */
} .demo {
scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */
overflow-x: hidden;
overflow-y: auto;
}
使用CSS隐藏元素滚动条的更多相关文章
- CSS隐藏元素的几种方法
使用CSS隐藏元素的方法很多,在这里简单总结一下: 1.display:none display:none 应该是最常用的一种隐藏元素的方法,使用该方法隐藏的元素脱离文档流不占据空间,不会被浏览器解析 ...
- CSS隐藏元素的几种妙法
一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...
- CSS“隐藏”元素的几种方法的对比
本文地址:http://luopq.com/2016/02/15/css-tricks-of-hide-element/,转载请注明 一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设 ...
- css隐藏元素的六类13种方法
隐藏元素的方法 隐藏元素的方法可以总结为六类:直接隐藏.对溢出内容隐藏.对元素透明度进行调整.将元素移除当前屏幕.对元素的层级关系进行调整.对元素进行裁剪 只有对元素的透明度进行调整才可以点击,其余都 ...
- css隐藏元素的几种方法与区别
css隐藏元素的几种方法与区别 一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方. 二:position:abso ...
- 【前端】CSS隐藏元素的方法和区别
CSS隐藏元素的方法和区别 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 有趣的css—隐藏元素的7种思路
css隐藏元素的7种思路 前言 display.visibility.opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题. 属性 值 是否在页面上显示 注册点击事件是否有效 是否存在 ...
- 用css隐藏元素的5种方法
.green { width: 100px; height: 100px; background-color: #a0ee00; text-align: center; float: left; ma ...
- 不同场景下使用CSS隐藏元素
使用 CSS 让元素不可见的方法很多,剪裁.定位到屏幕外.明度变化等都是可以的.虽然它们都是肉眼不可见,但背后却在多个维度上都有差别. 元素不可见,同时不占据空间.辅助设备无法访问.不渲染 使用 sc ...
随机推荐
- PHP 垃圾回收机制详解
前言:之前对PHP的GC只是了解了个大概,这次详细了解下PHP的垃圾回收机制(GC). 介于网上大部分都是PHP5.X的GC,虽然 php5 到 php7 GC部分做出的改动较小,但我觉得还是一起写下 ...
- 字节输出流FileOutputStream
#字节流 字节输出流FileOutputStream 创建输出流对象 OutputStream 流对象是一个抽象类,不能实例化.所以,我们要找一个具体的子类 :FileOutputStream. 查看 ...
- 实测搭建jenkins多环境、多分支demo
一.环境以及工具信息 1. 3台服务器信息 jenkins: 192.168.123.163.serverA:192.168.123.130.serverB :139.198.17.241三台机器都是 ...
- 要什么 Photoshop,会这些 CSS 就够了
标题党一时爽,一直标题党一直爽 还在上大学那会儿,我就喜欢玩 Photoshop.后来写网页的时候,由于自己太菜,好多花里胡哨的效果都得借助 Photoshop 实现,当时就特别希望 CSS 能像 P ...
- Zifencei扩展
fence 指令对外部可见的访存请求,如设备 I / O 访问,内存访问等进行串行化.外部可见是指对处理器的其他核心.线程,外部设备或协处理器可见. fence.i 指令同步指令和数据流.在执行 fe ...
- Kotlin开发springboot项目(三)
Kotlin开发springboot项目(三) 在线工具 https://www.sojson.com IDEA中Kotlin生成可执行文件1,项目使用Gradle构建2,在model的build.g ...
- 面向对象(三)--多态、封装、property装饰器
一.多态与多态性 1.什么是多态 多态指的是同一种类/事物的不同形态 class Animal: def speak(self): pass class People(Animal): def spe ...
- Nginx 核心配置-作为下载服务器配置
Nginx 核心配置-作为下载服务器配置 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.无限速版本的下载服务器 1>.查看主配置文件 [root@node101.yinz ...
- Linux服务器安全加固
关于对公司网站服务器安全加固的一些想法及思路: 一.修改密码和ssh登录端口,并且尽可能的用密钥对登录,禁止用密码登录(主要针对Linux)二.修改/etc/hosts.allow 设置仅仅允许某几台 ...
- m0n0防火墙安装配置方法
m0n0防火墙安装配置方法 准备工具: vmware虚拟机 m0n0防火墙安装镜像:M0n0Wall - generic-pc-1.8.1.iso 桥接网卡ip:192.168.43.0/24 hos ...