zoukankan      html  css  js  c++  java
  • CSS设置滚动条样式

    webkit滚动条样式重置

    1、scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。
    2、scrollbar corner为横向和竖向的交叉角区域
    3、resize用来设置滚动条的交汇处上用于拖动调整元素大小的小控件

    组成结构图如下:

    一旦发现滚动条的自定义样式,浏览器的默认样式设置将会失效,只使用在css定义的样式。也就意味值不能单独只设置scrollbar button或scrollbar track。

    -webkit-scrollbar  /* 滚动条整体部分,重置时必须要设置 */
    -webkit-scrollbar-button  /* 滚动条的轨道的两端按钮  */
    -webkit-scrollbar-track /* 滚动条的轨道(包含thumb和trace-piece)*/
    -webkit-scrollbar-track-piece /* 轨道中下方块的上下(左右)部分*/
    -webkit-scrollbar-thumb  /*滚动条里面的小方块*/
    -webkit-scrollbar-corner /* 垂直和水平的交叉角 */
    -webkit-resize // 滚动条的交汇处上用于拖动调整元素大小的小控件 */

    可以结合以下伪类进行设置(不同的操作系统浏览器滚动条可能不一样,所有可以根据下面伪类来设置):

    • :horizontal 水平方向的track、track-piect、thumb
    • :vertica 垂直方向的track、track-piect、thumb
    • :decrement 向上和向左按钮的button、向上或向左的track-piece
    • :increment 向下和向右按钮的button、向下和向右的track-piece
    • :start 适用于buttons和track pieces,对象(buttons 或 trace piece)是否放在滑块的前面
    • :end 适用于buttons和track pieces,对象(buttons 或 trace piece)是否放在滑块的后面
    • :double-button 适用于buttons和track pieces,轨道结束的位置是否是一对按钮
    • :single-button 适用于buttons和track pieces,轨道结束的位置是否是一个按钮
    • :no-button 适用于track pieces,轨道结束的位置没有按钮
    • :corner-present 适用于所有scrollbar,滚动条的角落是否存在
    • :window-inactive 适用于所有scrollbar,包含滚动条的区域,焦点不在该窗口的时候
    • :enabled, :disabled, :hover , :active 这些伪类同样适用

    电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com

    IE滚动条样式重置

    IE中只能修改滚动条颜色

     
    scrollbar-arrow-color:#f2f2f3;  /*上下箭头*/
    scrollbar-track-color  /*底层背景色*/
    scrollbar-face-color   /*滚动条前景色,对应thumb*/
    scrollbar-shadow-color /*滚动条边线色,thubm的border*/
    scrollbar-highlight-color  /*滚动条整体颜色*/
    scrollbar-base-color /* 滚动条基准颜色 */
  • 相关阅读:
    支持向量机SVM知识点概括
    决策树知识点概括
    HDU 3081 Marriage Match II
    HDU 3572 Task Schedule
    HDU 4888 Redraw Beautiful Drawings
    Poj 2728 Desert King
    HDU 3926 Hand in Hand
    HDU 1598 find the most comfortable road
    HDU 4393 Throw nails
    POJ 1486 Sorting Slides
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/13816020.html
Copyright © 2011-2022 走看看