设置滚动条的样式:

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. 使用Json框架解析遇到Java关键字时的解决方案

    当Json数据中的key为Java关键字时,在定义实体类的时候不能对该字段进行声明,所以需要对字段进行特殊处理 使用Gson解析 在与Java关键字冲突的字段加上@SerializedName注解 @ ...

  2. android中shape的使用介绍-2环形

    匿名内部类不能修改外部类的临时变量,但属性变量可以访问 参考:http://blog.csdn.net/north1989/article/details/52939888

  3. JavaScript的for循环

    1.循环的目的 什么是循环?循环的目的是什么?循环能做什么? 举一个小例子:武汉疫情,学了JavaScript,必须拿JavaScript干点有意义的事情.我们想告诉武汉:“武汉加油,武汉挺住啊!”. ...

  4. arduino 的analogRead() 和analogWrite()

    模拟输入analogRead()函数的返回值范围是0 到1023; 而模拟输出analogWrite()函数的输出值范围是0 到255; 所以: val = analogRead(potpin); / ...

  5. JAVA 代码查错

    1.abstract class Name { private String name; public abstract boolean isStupidName(String name){}} 大侠 ...

  6. Request 对象的主要方法

    setAttribute(String name,Object):设置名字为 name 的 request 的参数值 getAttribute(String name):返回由 name 指定的属性值 ...

  7. HTML的简介和历史发展过程

    HTML的简介和历史发展过程 前言 这次写一篇对于HTML以及CSS的简介,平常我们大家都知道的编程语言有很多种,比如Java.C++.Python等等,每种编程语言都有其独具的特色,不论是语法格式还 ...

  8. Ubuntu18.04美化MacOS(新更grub界面美化)

    写在前面的话: 在美化过程中大多数资源来自境外网站,下载时速度特别慢,写这篇博客一是为了给读者看,也是为了自己保存资源并记录ubuntu18.04的使用,避免你们或是自己以后再花费大量时间去百度方法和 ...

  9. 常用sql进阶语句

    一.扩展数据库表字段长度 --mysql alter table user modify name varchar2 (32); --oracle alter table A modify(name ...

  10. ojdbc6中OraclePreparedStatement的ArrayIndexOutOfBoundsException异常BUG-6396242

    现场信息 Caused by: java.lang.ArrayIndexOutOfBoundsException: -32203 at oracle.jdbc.driver.OraclePrepare ...