欢迎各位兄弟 发布技术文章
这里的技术是共享的
滚动条的样式我们可以通过css来控制的,滚动条样式主要涉及到如下overflow属性,下面简单为大家介绍下具体的控制属性,感性的朋友不要错过
滚动条样式主要涉及到如下overflow属性:
overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容,其用到的表现形式和值有以下几种
overflow: auto; 在需要时内容会自动添加滚动条
overflow: scroll; 总是显示滚动条
overflow-x: hidden; 禁止横向的滚动条
overflow-y: scroll; 总是显示纵向滚动条
以上三个属性设置的值为visible、scroll、hidden、auto
visible 默认值。使用该值时,无论设置的"width"和"height"的值是多少,其中的内容无论是否超出范围都将被强制显示。
hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。
scroll 无论内容是否超越范围,都将显示滚动条。
auto 当内容超出范围时,显示滚动条,否则不显示。
自定义滚动条的样式实例
来自 http://www.jb51.net/css/114219.html
自定义滚动条的样式实例
来自 http://www.jb51.net/css/114219.html
css 设置滚动条样式
前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得有必要折腾一下。于是在各大浏览器中对比了一下,发现只用Chrome适用,也就是说这个用的是Chrome的私有CSS属性。便百之谷之后,发现原来不仅仅只用Chrome,其它的浏览器在不同程度上支持自定义滚动条样式的。下面是我不断测试的结果,若有错误或不全,请在评论里面给出,我会立马更正;若有更好的方案,你可以留言,让大家都开开眼界。。。。。。 自定义IE浏览器滚动条样式追溯浏览器对滚动条的自定义,恐怕最早的就是IE浏览器了(好像最开始支持的版本是IE5.5)。下面列出了多个版本的支持性况:
为了有助于理解IE中滚动条样式的控制,你可以查看如下的图片: 以上所写的几个四个CSS属性,足以控制Win 8系统下,IE浏览器的滚动条样式了。但经过测试,发现,其它的四个属性仍然支持(主要是在以上几个属性空缺时,就会体现其作用)。具体如下:
感觉IE浏览器滚动条自定制功能并不是很强,只能控制一样显示各个部分的颜色而已,像宽度,结构等都无法控制,要靠出个性点的滚动条,很难!很难!!! 自定义FireFox浏览器滚动条在网上找了很多关于Firfox自定义浏览器滚动条的方法,发现firefox中却实是不支持的。发现了几篇说可以更改,自己也跟着代码写了几次(不知是我错了还是。。。),发现却是不起作用。以下是一点小的收获: 复制
实测以上代码并不起作用。但也可能是我的浏览器的版本不对吧!你可以试试,要是有效的话,你可以把你的FF版本发表在文章评论里面。 下面给两个关于FF滚动条的讨论(你多少web开发者希望FF能够像webkit内核浏览器一样程度的来支持滚动条自定义): webkit内核的浏览器滚动条定制在所有浏览器,滚动条可定制性最强的当属webkit内核的浏览器了。因为源代码开放的原因,市面上基于webkit内核的浏览器也是很难穷举完。例如有:Google Chrome、Opera(opera最近宣布使用webkit内核了)、360极速浏览器,猎豹浏览器等,搜狗浏览器······ 下面我们来看一下webkit浏览器是如何强大的吧! 复制
以上CSS代码所管辖的区域对就关系:以上注释中的数字与下图中数字相对应。 上图正如如下所言:
注意:对以上各个部分定义width,height时。有如下功能:若是水平滚动条,则width属性不起作用,height属性用来控制滚动条相应部分竖直方向高度;若是竖直滚动条,则height属性不起作用,width属性用来控制相应部分的宽度。 能过上面的不断的测试。在Chrome中,滚动条中的各个部分和DOM中块级元素是一样的。通过::-webkit-scrollbar等就类似于原来所说的CSS中的选择器。而{}中的属性,你就像控制一般块级元素一样简单(强大啊)。 请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地,大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还包含一些PHP语言等的实用例子。 请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地,大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还包含一些PHP语言等的实用例子。 请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地,大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还包含一些PHP语言等的实用例子。 请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地,大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还包含一些PHP语言等的实用例子。 对应的源代码如下: CSS部分代码: 复制
HTML结构: 复制
通过以上,我们几乎就可以来重写网站的滚动条了,但是webkit提供的还有更多的伪类,可以定制更丰富滚动条样式。本文以下内容参考:https://www.webkit.org/blog/363/styling-scrollbars/
另外,:enabled、:disabled、:hover、和:active等伪类同样在滚动条中适用。 看了这些伪类,怎么也没有明白是什么意思,还是自己得写的试试。实践出真知嘛!你可以击接以下链接到官方演示DEMO(感觉可以学到很多东西的):http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/overflow-scrollbar-combinations.html 下面我自己尝试着去写的DEMO,不要嫌它太丑就好。 三国平分,终归一统为了一致的用户体验,有时我们就不得不放弃使用部分浏览器提供的CSS接口来定制滚动条,转而寻求更佳的代替方案。 其中的一中方案是使用jQuery插件,jquery-custom-content-scroller。使用插件的好处是显而易见的,但是坏处也多得去了。要是您想了解jQuery-custom-content-scroller的具体使用方法,请移步到:http://manos.malihu.gr/jquery-custom-content-scroller/ 下面我就jQuery滚动条插件的使用作一下简单介绍: 第一步:在内容的顶部引入滚动条相应的样式表文件和jquery的库文件,jquery插件jquery.mcustomscrollbar文件。代码如下: 复制
第二步:在要显示滚动条的元素(元素内容中必须要有溢出的块,否则就不会出现滚动条)上面,加入 复制
关于此插件的详细介绍,你可以访问官网,里面讲的相当详细,我就不再此多赘述。 |
原创文章,转载请注明出处:小天地,大世界[http://www.lyblog.net]
文章地址:http://www.lyblog.net/detail/314.html
上一篇:织梦后台卡死的原因分析及解决办法
下一篇:CSS 3 Media Queries 学习小结
来自 http://www.lyblog.net/detail/314.html
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了。那webkit浏览器是如何自定义滚动条的呢?
webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的。当然,兼容所有浏览器的滚动条样式目前是不存在的。
来看看这2个滚动条demo:
、::-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,那里也有注释。
原文地址:http://www.xuanfengge.com/css3-webkit-scrollbar.html::-webkit-scrollbar{width:14px;} ::-webkit-scrollbar-track{background-color:#bee1eb;} ::-webkit-scrollbar-thumb{background-color:#00aff0;} ::-webkit-scrollbar-thumb:hover {background-color:#9c3} ::-webkit-scrollbar-thumb:active {background-color:#00aff0}
这段代码放倒CSS文件里去,宽度颜色自己修改,且只在webkit内核浏览器下才生效,就是谷歌浏览器的内核。
来自 https://zhidao.baidu.com/question/751454776548850204.html?skiptype=2
请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。 小天地,大世界是一个Web前端的技术博客。 主要是关于 HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还 包含一些PHP语言等的实用例子。
请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。 小天地,大世界是一个Web前端的技术博客。 主要是关于 HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还 包含一些PHP语言等的实用例子。