html滚动条样式

一、滚动条的轨迹，记作：scrollbar-track。所谓“轨迹”，指滚动条的滑动块运行时所必经的路线。 二、滚动条的滑动块，即在它上面按下鼠标左键不放可上下或左右移动的滑动块以及滚动条两头的小方块，记作：scrollbar-face。face即滚动条的“脸”，注意它有三张“脸”：滑动条和两头的小方块。
三、滚动条亮边框部分，记作：scrollbar-highlight。这个亮边框，和表格的亮边框概念是一样的，即左边和上边部分，滚动条的亮边框部分是指滚动条的“脸”（即滑动块和两头小方块）的亮边框。
四、滚动条亮边框部分的外围还有一个立体修饰部分，记作scrollbar-3dlight。3d即立体的意思，它将包围在滚动条亮边框部分的外边。
五、滚动条阴影部分，指主滑块和两头方块的阴影，位于左边和左下，记作：scrollbar-shadow。
六、滚动条阴影部分还有一个强阴影部分，记作scrollbar-darkshadow，它包围在阴影部分的外边。
七、滚动条两头方志标志箭头，记作：scrollbar-arrow，箭头方向为向下、向上、向左、向右。

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • vue实现一个滚动条样式

    vue实现一个滚动条样式

    起初是想修改浏览器滚动条样式来达到效果 但是查阅了资料 浏览器滚动条不能修改宽度与位置 没办法只能自己写 首先是滚动条样式 <div class="scrollBar" v-if="roleList.length > 5"> <div class="box" @mousedown="move" v-bind:style="{ width: activewidth + 'px' }"

  • CSS自定义滚动条样式案例详解

    CSS自定义滚动条样式案例详解

    CSS3自定义滚动条样式 -webkit-scrollbar 当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义. 首先我们要了解滚动条.滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深. 滚动条的css样式主要有三部分组成: ::-webkit-scrollbar   定义了滚动条整体的样式: ::-webkit-scrollbar-thum

  • vue修改滚动条样式的方法

    vue修改滚动条样式的方法

    目录 首先要知道,修改滚动条样式,利用伪元素-webkit-scrollbar. 注意, ::-webkit-scrollbar仅仅支持WebKit的浏览器(例如谷歌Chrome.苹果Safari). 其次还需要了解滚动条的一些组成: ::-webkit-scrollbar 滚动条整体部分,可以设置宽度等 ::-webkit-scrollbar-thumb 滚动条里面的滑块 ::-webkit-scrollbar-button 滚动条轨道两端的按钮,允许通过点击以微调滑块的位置 ::-webki

  • vue中改变滚动条样式的方法

    写在前面: 我是 扬帆向海,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法 感兴趣,可以关注我的动态,我们一起学习. 用知识改变命运,让我们的家人过上更好的生活. 今天在自己开发的一个项目中,需求是让浏览器的滚动轴变细.想了好长时间才完成,在目前的测试中,滚动条在IE浏览器中不支持. scrollbar.css @charset "utf-8"; ::-webkit-s

  • JQuery+DIV自定义滚动条样式的具体实现

    JQuery计算滚动条长度和位置,代码如下: javascript 复制代码 代码如下: <script type="text/javascript">    var scrMinHeight = 1; //滚动条最小高度    var scrMaxHeight = 0; //滚动条最大高度    var scrDefualtTop = 80; //滚动条默认位置    var scrHeight = 0;    //初始化滚动条    function InitScrol

  • 利用div+jquery自定义滚动条样式的2种方法

    最近做项目中有一个模块是用于实时监控的,左边有个菜单栏用于显示所有的设备,那当然是从数据库中动态获取的了,右边是个iframe用于显示监控画面.本来这个功能并不复杂,左边的菜单项是利用dtree.js来实现的,可时当功能实现完成之后,却发现一个问题,就是左边菜单栏中的设备名有的会很长,会超出了div的长度,准确说是左边iframe的宽度和长度不够.那么,这时就必须要利用滚动条了,可以设置左边菜单项div的overflow-x:auto;overlfow-y:auto;这样就会自动生成了滚动条,但

  • WPF如何自定义ProgressBar滚动条样式

    WPF如何自定义ProgressBar滚动条样式

    一.前言 滚动条一般用于加载进度,我们在看视频的时候或者在浏览网页的时候经常能看到加载进度的页面.在程序开发中,默认的进度加载样式可能跟程序风格不太一样,或者加载进度的时候需要更改一下加载的样式.这个时候就需要通过修改ProgressBar的样式来实现. 二.ProgressBar的基本样式 ProgressBar的基本样式很简单: <Style TargetType="{x:Type ProgressBar}"> <Setter Property="Foc

  • html滚动条样式

    html滚动条样式

    一.滚动条的轨迹,记作:scrollbar-track.所谓"轨迹",指滚动条的滑动块运行时所必经的路线. 二.滚动条的滑动块,即在它上面按下鼠标左键不放可上下或左右移动的滑动块以及滚动条两头的小方块,记作:scrollbar-face.face即滚动条的"脸",注意它有三张"脸":滑动条和两头的小方块. 三.滚动条亮边框部分,记作:scrollbar-highlight.这个亮边框,和表格的亮边框概念是一样的,即左边和上边部分,滚动条的亮边框部

  • javascript下for( in )语句 获得所有style 的【scrollbar】滚动条样式内容

    events=[];for(o in O=obj.currentStyle)events.push(o+'='+O[o])  这里输入代码内容 0 events=[''];for(o in O=obj.currentStyle)if(/^scrollbar/.test(o))events.push(o+'='+O[o]) obj.innerHTML=' '+events.sort().join(' ')+' ' [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • javascript jscroll模拟html元素滚动条

    javascript jscroll模拟html元素滚动条

    主流浏览器默认为html元素提供的滚动条不美观,而且前端开发人员想对其通过css进行统一样式的美化也是不可实现的.比如ie可以通过样式来实现简单的美化.Webkit内核浏览器可以控制滚动条的显示效果,firefox则不允许用户为滚动条定义样式.但是对于追求友好的用户体验的前端开发人员,是不会被这些浏览器的不一致行为所阻止的.我们可以自己通过标准的html元素模拟来实现自定义的滚动条. 这里是自己在工作不太忙的时候写出来了一个用户可以自定义的滚动条jscroll,以下简称jscroll.jscro

随机推荐