zoukankan      html  css  js  c++  java
  • 修改滚动条样式

    前言

    webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的。当然,兼容所有浏览器的滚动条样式目前是不存在的。

    演示

    来看看这2个滚动条demo: demo1(图片版)demo2(纯CSS3版)

    滚动条组成

    • ::-webkit-scrollbar 滚动条整体部分
    • ::-webkit-scrollbar-thumb  滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
    • ::-webkit-scrollbar-track  滚动条的轨道(里面装有Thumb)
    • ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
    • ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
    • ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
    • ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

    简洁版

    这里就不贴出详细代码了,demo里面可以通过查看源码寻找具体样式的设置。来看看demo2中第二个滚动条的样式

    详细设置

    定义滚动条就是利用伪元素与伪类,那什么是伪元素和伪类呢?

    伪类大家应该很熟悉:link,:focus,:hover,此外CSS3中又增加了许多伪类选择器,如:nth-child,:last-child,:nth-last-of-type()等。

    CSS中的伪元素大家以前看过::first-line,:first-letter,:before,:after。那么在CSS3中,伪元素进行了调整,在以前的基础上增加了一个“:”也就是现在变成了“::first-letter,::first-line,::before,::after”,另外CSS3还增加了一个“::selection”。两个“::”和一个“:”在css3中主要用来区分伪类和伪元素。

    webkit的伪类和伪元素的实现很强,可以把滚动条当成一个页面元素来定义,再结合一些高级的CSS3属性,比如渐变、圆角、RGBa等等。然后如果有些地方要用图片,可以把图片也可以转换成Base64,不然每次都得加载那个多个图片,增加请求数。

    任何对象都可以设置:边框、阴影、背景图片等等,创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。有点小复杂,具体怎么写可以看第一个demo,那里也有注释。

  • 相关阅读:
    Hadoop集群(三) Hbase搭建
    Hadoop集群(二) HDFS搭建
    Hadoop集群(一) Zookeeper搭建
    Redis Cluster 添加/删除 完整折腾步骤
    Redis Cluster在线迁移
    Hadoop分布式HA的安装部署
    Describe the difference between repeater, bridge and router.
    what is the “handover” and "soft handover" in mobile communication system?
    The main roles of LTE eNodeB.
    The architecture of LTE network.
  • 原文地址:https://www.cnblogs.com/kugeliu/p/7196656.html
Copyright © 2011-2022 走看看