如何使用css隐藏滚动条

如何隐藏滚动条,同时仍然可以在任何元素上滚动?

首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可。想要完全隐藏滚动条只需设置overflow:hidden即可,但是这样一来将导致元素内容不可滚动。时至今日,还没有任何一条CSS规则可以使元素可以隐藏滚动条的同时依然可以滚动内容,只能通过针对特定浏览器设置滚动条样式来实现。

火狐浏览器

scrollbar-width: none; /* Firefox */

ie浏览器

-ms-overflow-style: none; /* IE 10+ */

Chrome和Safari浏览器

::-webkit-scrollbar {
display: none; /* Chrome Safari */
}

详情请看 https://www.cnblogs.com/jofun/p/11158145.html

2020-02-07     15:23:09

css 隐藏滚动条的更多相关文章

  1. 实现CSS隐藏滚动条并可以滚动内容

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...

  2. css隐藏滚动条

    xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transi ...

  3. 3种方法实现CSS隐藏滚动条并可以滚动内容

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其 实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1 ...

  4. 如何让css隐藏滚动条 兼容谷歌、火狐、IE等各个浏览器

    项目中,页面效果需要展示一个页面的移动端效果,使用的是一个苹果手机样式背景图,咋也没用过苹果,咋也不敢形容. 如下图所示: 在谷歌浏览器如图一滚动条顺利隐藏,但是火狐就如图二了,有了滚动条丑的一批. ...

  5. css隐藏滚动条 兼容谷歌、火狐、IE等各个浏览器

    项目中,页面效果需要展示一个页面的移动端效果,使用的是一个苹果手机样式背景图,咋也没用过苹果,咋也不敢形容. 如下图所示: 在谷歌浏览器如图一滚动条顺利隐藏,但是火狐就如图二了,有了滚动条丑的一批. ...

  6. 如何使用CSS隐藏滚动条并且兼容大部分浏览器

    隐藏滚动条,已经自己实测在浏览器Chrome, IE (6+), Firefox, Opera, Safari. 如下demo: Content 1 Content 1 Content 1 Conte ...

  7. 浏览器css隐藏滚动条的方法!除了IE一般都支持

    ::-webkit-scrollbar { /* 滚动条整体部分 */ width:0px; margin-right:2px}::-webkit-scrollbar-track-piece { /* ...

  8. css隐藏滚动条依旧可以滚动

    在做企业页面的时候,大部分页面都应该是活的,不应该写死,因为要从后台拿数据进行填充.而后台的数据是不确定的,有时候会让我们的容器撑得很大.这时候我们需要隐藏掉滚动条达到美观或者其他布局效果,隐藏掉单个 ...

  9. CSS隐藏滚动条但又能滚动,不用js实现

    隐藏多余的内容,但是可以滑动查看 原理就在于padding-right:17px;把滚动条挤出去隐藏了

随机推荐

  1. docker-Gitlab、GitLab Runner安装

    以下操作均在CentOs下操作 1.Gitlab install ① 启动gitlab docker run --detach \ --hostname 115.30.149.35 \ --publi ...

  2. java反射机制梳理

    java反射机制梳理 Java反射简介 反射简介 编译和运行 编译时刻加载类是静态加载类.运行时刻加载类是动态加载类 要让Java程序能够运行,那么就得让Java类要被Java虚拟机加载.Java类如 ...

  3. 使用自定义注解和springAOP捕获Service层异常,并处理自定义异常

    一 自定义异常 /** * 自定义参数为null异常 */ public class NoParamsException extends Exception { //用详细信息指定一个异常 publi ...

  4. 2019年,我花了3个月时间备考PMP

    ​ 经过几个月的准备,终于在2019年12月7日完成了PMP的考试,并于1月21日查到了成绩,喜获5A,意料之中.总结这次考试的具体情况:涉及题型虽然都没有超出大纲的范围,但是原题出现的概率似乎不高, ...

  5. Docker Mysql部署与使用

    参考链接:Docker 安装 Mysql 详解

  6. 遍历CSDN博客

    --http://blog.csdn.net/leixiaohua1020/article/list/14?viewmode=contents function saveData(data) loca ...

  7. 情人节到了,Postman 都脱单了,那你咧?

    前言 Postman 是一款API接口调试工具,做过 Web 接口或多或少应该接触过. 通过它可以完成 Http 接口的调试,测试同学也可以基于此做一些自动化测试.另外 Postman 还提供其他高级 ...

  8. 2019icpc西安邀请赛

    来源:https://www.jisuanke.com/contest/2625?view=challenges 更新中 A.Tasks 直接贪心 代码:听说当时很多队伍提前拆题甚至上机了,所以很多0 ...

  9. learn about sqlserver files and filegroup

    The filegroup is similar as tablespace in Oracle. At first, I will show that hot to check file amd f ...

  10. ESXi以及WorkStation缩减thin provision模式Linux虚拟机磁盘的方法

    1. 公司的服务器采用ESXi 进行管理. 有时候为了灵活性,需要将虚拟机从ESXi服务器上面导出来. 放置到不同的客户机器上面去. 2. 但是发现,比如我在linux里面安装了Oracle数据库, ...