设置滚动条的样式:

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实现三进制转十进制

    ** 三进制转十进制** 不同进制的数值间的转换是软件开发中很可能 会遇到的常规问题.下面的代码演示了如何把键盘输入的3 进制数字转换为十进制.试完善之. BufferedReader br = ne ...

  2. 容器技术之Docker私有镜像仓库docker-distribution

    在前边的博客中我们说到docker的架构由docker客户端.服务端以及仓库组成:docker仓库就是用来存放镜像的地方:其实docker registry我们理解为存放docker镜像仓库的仓库比较 ...

  3. 用struts的action运行jsp页面

    struts是开源框架.使用Struts的目的是为了帮助我们减少在运用MVC设计模型来开发Web应用的时间.如果我们想混合使用Servlets和JSP的优点来建立可扩展的应用,struts是一个不错的 ...

  4. @uoj - 164@ 【清华集训2015】V

    目录 @description@ @solution@ @accepted code@ @details@ @description@ Picks博士观察完金星凌日后,设计了一个复杂的电阻器.为了简化 ...

  5. Flask 蓝图(Blueprint)使用方式解析

    Flask蓝图提供了模块化管理程序路由的功能,使程序结构清晰.简单易懂.下面分析蓝图的使用方法 假如说我们要为某所学校的每个人建立一份档案,一个很自然的优化方式就是这些档案如果能分类管理,就是说假如分 ...

  6. pycharm安装破解方法

    1.pycharm专业版官方下载链接:http://www.jetbrains.com/pycharm/download/#section=windows正常下载并安装 2.从https://gith ...

  7. python下载及安装步骤

    Python安装 1.浏览器打开网址:www.python.org 2.根据电脑系统选择下载 3.确定电脑系统属性,此处我们以win10的64位操作系统为例 4.安装python 3.6.3 双击下载 ...

  8. delete语句的基本用法

    DELETE FROM tb_courses WHERE course_id=;

  9. 【JMeter_19】JMeter逻辑控制器__简单控制器<Simple Controller>

    简单控制器<Simple Controller> 业务逻辑: 就像他的名字一样,简单,可以理解为一个文件夹,就是分组用的,没有其他特殊功能,但相比不添加简单控制器,区别在于简单控制器可以被 ...

  10. 一文梳理JavaScript 事件循环(Event Loop)

    事件循环(Event Loop),是每个JS开发者都会接触到的概念,但是刚接触时可能会存在各种疑惑. 众所周知,JS是单线程的,即同一时间只能运行一个任务.一般情况下这不会引发问题,但是如果我们有一个 ...