设置滚动条的样式:

div::-webkit-scrollbar {
width: ;
}
 

关于::-webkit-scrollbar

::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式

::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用.

CSS滚动条选择器

你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:

  • ::-webkit-scrollbar — 整个滚动条.
  • ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
  • ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
  • ::-webkit-scrollbar-track — 滚动条轨道.
  • ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
  • ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
  • ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

语法

::-webkit-scrollbar { styles here }

例子

.invisible-scrollbar::-webkit-scrollbar {
display: none;
} .mostly-customized-scrollbar::-webkit-scrollbar {
width: 5px;
height: 8px;
background-color: #aaa; /* or add it to the track */
} .mostly-customized-scrollbar::-webkit-scrollbar-thumb {
background: #;
}

CSS-界面滚动时不显示滚动条的更多相关文章

  1. css控制打印时只显示指定区域

      CreateTime--2017年9月26日08:16:04 Author:Marydon css控制打印时只显示指定区域 思路: 1.使用打印命令@media print: 2.控制执行打印命令 ...

  2. div可以滚动但不显示滚动条

    首先有3个div, 第1个,固定大小是200*200(单位为px,下同) 第2个,不固定大小,其大小要用第3个div把个撑开,但是这个div必需要有滚动条, 第3个,固定大小与第1个div保持一致20 ...

  3. JAVA Eclipse开发Android如何让超出界面的部分自动显示滚动条

    在原有布局的最外围添加一层ScrollView,注意原有布局的声明也要删了 <ScrollView xmlns:android="http://schemas.android.com/ ...

  4. css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡

    pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...

  5. WOW.js和animate.css让页面滚动时显示动画

    官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...

  6. PC版模块滚动不显示滚动条效果

    以前对某个模块增加无滚动条的滚动效果,还需要找个插件才能实现,现在发现个简单方法,用普通的CSS就可以实现. 此方法只适用于不显示滚动条的滚动效果,如果需要自定义滚动条样式,还是需要插件来实现. HT ...

  7. 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  8. CSS元素超出部分滚动,并隐藏滚动条

    方法一, 利用 css 3 的新特性  -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE <!DOCTYPE html> <html> <head ...

  9. 【转】如何使App从后台返回前台时,显示指定界面

    用户操作App至任意界面,然后按home键切到后台,然后再从后台返回前台后,如何将App显示到指定界面? 对于这个需求,具体来说分2种情况: 指定界面是一种盖在整个App上的效果.例如: 有道云笔记的 ...

随机推荐

  1. java实现第七届蓝桥杯打印数字

    打印数字 打印数字 小明写了一个有趣的程序,给定一串数字. 它可以输出这串数字拼出放大的自己的样子. 比如"2016"会输出为: 00000 1 6666 2 0 0 1 1 6 ...

  2. 除了FastJson,你也应该了解一下Jackson(一)

    在上月末的时候收到一条关于fastjson安全漏洞的消息,突然想到先前好像已经有好多次这样的事件了(在fastjson上面).关于安全方面,虽然中枪的机率微小,但是在这个信息越来越复杂的时代,安全性也 ...

  3. 掌握SpringBoot-2.3的容器探针:基础篇

    欢迎访问我的GitHub 地址:https://github.com/zq2599/blog_demos 内容:原创文章分类汇总,及配套源码,涉及Java.Docker.K8S.DevOPS等 关于& ...

  4. 02-Python基础1

    本节内容 列表.元组操作 字符串操作 字典操作 集合操作 文件操作 字符编码与转码 1. 列表.元组操作 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 定义列表 ...

  5. Windows下mysql的基础操作

    1.数据库表操作: - 首先启动mysql服务器,在安装mysql的目录下打开cmd窗口,运行mysql:'mysql.exe -hlocalhost -p3306 -uroot -p123456'; ...

  6. 离职冷静期文件.doc

    <中华人民共和国民法典>通过十三届全国人大三次会议表决,将于2021年1月1日起施行,其中#离婚冷静期#备受关注.多方人士表示,离婚冷静期设立的出发点,不是对婚姻自由的一种破坏,而是让当事 ...

  7. WDCP配置ThinkPHP5伪静态隐藏index.php,出现“”解决重定向次数过”问题

    站点域名的配置:xxx.com.conf server { listen 80; root /www/web/xxx_com/public_html; server_name xxx.com; ind ...

  8. git环境配置 | GitHub

    注册完GitHub之后,需要配置git,其主要的目的是为了方便文件的上传.下载等. 一. git下载 https://git-scm.com/downloads 在git官网找到相应版本的git下载安 ...

  9. IOS 发布 程序截图问题

    特别要注意那个有无状态栏时的像素要求 **注意:在截屏模拟器的时候,请把模拟器的Scale设置成100%(Window->Scale->100%) 开模拟器截图,运行每一个iOS型号,然后 ...

  10. Java_图片转字符

    把高达头像转换成字符[-V-] 调节双循环里y与x的增量改变字符输出的细节.高和长 public class ImgToStr { public static void main(String arg ...