原理： 把滚动条设为完全透明；

/* 设置滚动条的样式 */::-webkit-scrollbar { width: 12px;}
/* 滚动槽 */::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0); border-radius: 10px;}
/* 滚动条滑块 */::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(0,0,0,0);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);}
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4);}

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

  1. CSS 实现隐藏滚动条同时又可以滚动（转）

    CSS 实现隐藏滚动条同时又可以滚动 移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚 ...

  2. 前端切图:CSS实现隐藏滚动条同时又可以滚动

    CSS 实现隐藏滚动条同时又可以滚动 原始功能: 图片发自简书App 添加伪类之后的功能: 图片发自简书App 完整demo如下: <!DOCTYPE html> <html> ...

  3. 纯css实现隐藏滚动条仍可以滚动

    移动端弹出层加了滚动条之后,滚动条一直在,有些不美观,overflow:hidden;虽然可以隐藏滚动条,但是不能滚动.需要实现隐藏滚动条但是仍可以滚动,js实现太麻烦,直接将滚动条隐藏会更好一些. ...

  4. CSS怎么隐藏滚动条(三种方法)

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

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

    方法一: 计算滚动条宽度并隐藏起来,其实我只是把滚动条通过定位把它隐藏了起来,下面给一个简化版的代码: <div class="outer-container"> &l ...

  6. CSS 实现隐藏滚动条同时又可以滚动

    方法1: 利用 css 3 的新特性  -webkit-scrollbar, 但是这种方式只兼容chrome,不兼容 火狐 和 IE. /* for Chrome */ .content::-webk ...

  7. css实现隐藏滚动条

    demo1: html <div class="outer-container"> <div class="inner-container"& ...

  8. 纯css实现移动端横向滑动列表&&overflow:atuo;隐藏滚动条

    <!DOCTYPE html> <html> <head> <title>横向滑动</title> <style type=" ...

  9. 前端福利之overflow-scrol 怎么隐藏滚动条(转)

    最近用vue写wap站的时候遇到了微信打开页面滚动条无法隐藏的问题. 对于隐藏滚动条,我们最常用的方法首先是: 1.使用以下CSS可以隐藏滚动条: .container::-webkit-scroll ...

随机推荐

  1. 为什么要使用Docker？

    作为一种新兴的虚拟化方式,Docker跟传统的虚拟化方式相比具有众多的优势. 更高效的利用系统资源 由于容器不需要进行硬件虚拟及运行完整操作系统等额外开销,Docker对系统资源的利用率更高.无论是应 ...

  2. Redis 设置开机启动

    1. 将下列代码保存为文件redis, 置于 /etc/init.d 下面 ########################### # chkconfig: 2345 90 10 redis服务必须在 ...

  3. Luogu P1690 贪婪的Copy

    题目描述 Copy从卢牛那里听说在一片叫yz的神的领域埋藏着不少宝藏,于是Copy来到了这个被划分为个区域的神地.卢牛告诉了Copy这里共有个宝藏,分别放在第Pi个(1<=Pi<=N)区域 ...

  4. Nginx 开启gzip压缩(图片,文件,css)

    1.Vim打开Nginx配置文件 vim /usr/local/nginx/conf/nginx.conf 2.找到如下一段,进行修改 gzip on; gzip_min_length 1k; gzi ...

  5. arm上电死机怎么烧写boot

    一般上电到死机还有一段时间,在这段时间完成,已经出现两次了.

  6. Flex中通过RadioButton进行切换

    1.页面切换 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx=& ...

  7. FusionCharts 3D帕累托图

    1.设计3D帕累托图的页面 Pareto3D.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&q ...

  8. UTF-8 的BOM带来的麻烦

    UTF-8 的BOM带来的麻烦 工作需要我用程序生成一个html文件. 由于服务器端使用apache+Tomcat来执行html和jsp文件. 开始生成html文件放在apache目录下,页面无法默认 ...

  9. 嵌入式linux------ffmpeg移植 编码H264（am335x编码H264）

    [cpp] view plaincopy <pre name="code" class="cpp"><pre name="code& ...

  10. 错误代码： 1242 Subquery returns more than 1 row

    1. 错误描述 1 queries executed, 0 success, 1 errors, 0 warnings 查询:SELECT t.id, DATE_FORMAT( t.statisTim ...