如何使用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. Mybatisplus代码生成器主类CodeGenerator配置

    //代码自动生成public class CodeGenerator { /** * <p> * 读取控制台内容 * </p> */ public static String ...

  2. .net 项目更改默认命名空间

    这个项目是我去年毕业设计做的项目,项目创建的时候由于手抖把Landlordtenant写成了 LandloRdtenant(R大写了),当时不知道如何改回来又担心改完之后报错也就没管了. 今天尝试使用 ...

  3. vue-父组件向子组件传值

    一.父组件向子组件传值 其实该问题是说子组件如何访问父组件的属性和方法?那么根据对组件化的理解,无非就是要解决两个问题: 1.父组件如何将值传给子组件? 2.子组件如何获取父组件传递过来的值? 解读v ...

  4. mysql 5.7中 count(0) count(*) count(主键) count(非空字段)效率比较

    mysql count(0) count(*) count(主键) count(非空字段) 效率比较 写代码的时候经理在背后说了一句count(0)的效率高于count(*) ,索性全部测试了一下 结 ...

  5. 使用Gradle自动创建Java项目结构

    D:\N3verL4nd\Desktop\java>tree 卷 本地磁盘 的文件夹 PATH 列表 卷序列号为 00000200 0006:08B0 D:. ├─.gradle │ ├─3.4 ...

  6. Android 开启与关闭软键盘

    http://www.cnblogs.com/weixing/p/3300908.html InputMethodManager imm = (InputMethodManager)getSystem ...

  7. MCI使用

    MCI(Media Control Interface)媒体控制接口是MircroSoft提供的一组多媒体设备和文件的标准接口,它的好处是可以方便地控制绝大多数多媒体设备包括音频.视频.影碟.录像等多 ...

  8. List<E> 、Set<E>和Map<K,E>的简单应用

    题目一: 创建两个线性表,分别存储{“chen”,“wang”,“liu”,“zhang”}和{“chen”,“hu”,“zhang”},求这两个线性表的交集和并集. 代码: List_Test.ja ...

  9. Codeforces 1138B Circus (构造方程+暴力)

    题意: 给你两个01串,要你选n/2个位置,使得选的位置在s1中"1"的数量等于未选的s2中"1"的数量 n<=5000,1s 思路: 设两个串中出现&q ...

  10. Java线程核心基础(上)

    Java线程核心基础(上) 一.实现多线程 根据Oracle官方文档,目前推荐的创建线程方法主要有两种,分别是继承Thread类和实现Runnable接口.通过阅读Thread类源码,可以发现二者不同 ...