如何使用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. Windows版Redis主从配置

    一.下载 从github上下载Redis的zip包,地址:https://github.com/MicrosoftArchive/redis/releases Redis本身不支持windows,这是 ...

  2. Python - Unittest小结

    一.Unittest 单元测试框架,可用于自动化测试用力组织,执行,输出结果 二.Unittest构成 Test Case Test Suite Test Fixture Test Runner (图 ...

  3. Linux文件内容重定向

    文件描述符 可以理解为linux跟踪打开文件,而分配的一个数字,这个数字有点类似c语言操作文件时候的句柄,通过句柄就可以实现文件的读写操作. 用户可以自定义文件描述符范围是:3-num,这个最大数字, ...

  4. maven项目pom.xml加载本地jar,自定义jar

    将jar放到resource目录下面: pom添加配置 <!-- 加载IK自定义 依赖--> <dependency> <groupId>com.ik.up< ...

  5. Stopping service [Tomcat] Disconnected from the target VM, address:XXXXXX解决方案

    原文出处:https://blog.csdn.net/u013294097/article/details/90677049 Stopping service [Tomcat] Disconnecte ...

  6. (数据科学学习手札74)基于geopandas的空间数据分析——数据结构篇

    本文对应代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 geopandas是建立在GEOS.GDAL.P ...

  7. Unreal Engine 4 蓝图完全学习教程(五)—— 关于数组

    Ⅰ.数组的含义及使用 数组是能统一保存若干数值的特殊变量.数组可以指定编号.运用其中的值,因此能够有序地管理大量的数据. 首先试图将上次创建的msg变量修改成数组,在细节栏点击修改: 并选择“修改变量 ...

  8. 【做题笔记】 P1610 鸿山洞的灯

    正解:DP 比较好写的/我用的算法:贪心 首先需要理解几个地方: 第二行输入的 \(n\) 个数字是每盏灯所在的地方.可以不按顺序,灯与灯之间的距离是个变量. 对于任意一段区间,只要是在 \(\tex ...

  9. Codeforces_814

    A.b序列从大到小填a序列中的0,在判断. #include<bits/stdc++.h> using namespace std; ],b[]; int main() { ios::sy ...

  10. HDU_3038_并查集

    http://acm.hdu.edu.cn/showproblem.php?pid=3038 并查集的应用,选择哪个点作为根结点都没关系,多了一个sum数组保存每个点到根节点的和,注意刚开始a减了1, ...