调整CSS的方式给滚动条换色

2016-02-20 00:00 5 1 收藏

每个人都希望每天都是开心的，不要因为一些琐事扰乱了心情还，闲暇的时间怎么打发，关注图老师可以让你学习更多的好东西，下面为大家推荐调整CSS的方式给滚动条换色，赶紧看过来吧！

【 tulaoshi.com - Web开发】

PSD转html，
设计稿上，有一处内嵌的介绍信息，当文字过长时，要求使用一个经过处理的滚动条来展示。

如果要求兼容firefox，可以使用JQ来进行制作。

如果仅要求IE浏览器，可以通过调整CSS的方式，来给滚动条换色。

代码如下：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）.uicss-cn { height:580px;overflow-y: scroll; scrollbar-face-color:#EAEAEA; scrollbar-shadow-color:#EAEAEA; scrollbar-highlight-color:#EAEAEA; scrollbar-3dlight-color:#EAEAEA; scrollbar-darkshadow-color:#697074; scrollbar-track-color:#F7F7F7; scrollbar-arrow-color:#666666; }

具体样式对应的scrollbar区域如图：

scrollbar

来源:http://www.tulaoshi.com/n/20160220/1631027.html

上一篇： win7删除桌面文件需要刷新解决
下一篇： CSS制作网页时遇到问题的快速参考技巧

看过《调整CSS的方式给滚动条换色》的人还看了以下文章更多>>

用CSS代码轻松Diy你的网页滚动条

标签： Web开发

在浏览网页的时候我们有时可以看到有的网页滚动条颜色不是系统默认的，而是漂亮的红色或其它颜色，其实这就是在网页代码之间加入代码来实现的，具体是哪些代码呢？网页滚动条代码及其解释如下：（复制时请将大写尖括号改为小写）以下是引用片段：＜Style type="text/css"＞＜!--...

发掘ListBox的潜力（一）：自动调整横向滚动条宽度

标签：编程语言网络编程

《自绘ListBox的两种效果》一文帖出之后，从反馈信息来看，大家对这种小技巧还是很认同。接下来我将继续围绕ListBox写一系列的文章，进一步发掘ListBox的潜力，其中包括：自动调整横向滚动条宽度、即时提示（Tips）、拖放插入点提示等，并在最后制作一个在滚动区内的ListBox组。自动调整横向滚动条宽度网上可以找到很多让Listbox...

MooTools教程(15):滚动条(Slider)

标签： Web开发

到现在为止，初始化这些MooTools插件对象就会开始变得越来越熟悉。滚动条（Slider）没有任何不同，你要创建一个新的滚动条，定义滚动条和滑块相关的元素，然后设置你的选项，再创建一些回调事件的控制函数。尽管滚动条（Slider）遵循这个熟悉的模式，但是任然还有一点特殊的地方。基本用法创建一个新的滚动条（Slider）对象我们首先从HTML...

Jquery iframe内部出滚动条

标签： Web开发

代码如下： //调用函数 var pagestyle = function() { var rframe = $("#mainFrame"); //ie7默认情况下会有上下滚动条，去掉上下15像素 var h = $(window).height() - rframe.offset().top - 15; rframe.height(h); } //注册加载事件 $("#mainFrame").load(pagestyle); //注册窗体改变大小事件 $(window).resize(pagestyle);

ScrollView滚动条颜色的设置方法

标签：编程语言网络编程

很多开发者在做Android UI时不知道如何设置ScrollView滚动条控件的滑块颜色，其实通过ScrollView的xml布局属性android:scrollbarThumbVertical可以关联一个drawable对象，比如说在ScrollView中我们有 android:scrollbars="vertical" //滚动条是垂直的 android:scrollbarThumbVertical="@drawable/red" //垂直滚动条颜色为red，red可以是一个png...

查看更多精彩>>