Windows LiveWindows Live™
 
 
Min's profileEasy Start To The DayBlogListsNetwork Tools Help

Blog

    Scrollbar 滚动条样式以及样式生成工具

     
    很多人非常喜欢滚动条样式. 确实很好看. 
     
    一个说明: 本篇文章所指的彩色样式只针对Internet Explorer 5.5+ 的浏览器起作用, Firefox等标准浏览器无效.

    滚动条样式主要涉及到如下CSS属性:

    overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容

    overflow: auto; 在需要时内容会自动添加滚动条
    overflow: scroll; 总是显示滚动条
    overflow-x: hidden; 禁止横向的滚动条
    overflow-y: scroll; 总是显示纵向滚动条

    width: 568px; width: 98%; 设置区域的宽度[像素/百分比等等]

    height: 120px; 设置区域的高度[像素/百分比等等]

     

    剩下的就是仅仅适用于IE 5.5+的浏览器样式了:

    scrollbar-base-color:#006699; 
    设置基色 设置该选项后可以不设置下面的属性, 浏览器会依据基色自动调整
    scrollbar-track-color:rgb(10,100,254); 底板轨迹颜色
    scrollbar-3dlight-color: ; 上/左边沿亮边颜色
    scrollbar-arrow-color: ; 两端箭头颜色
    scrollbar-darkshadow-color: ; 下/右边沿颜色
    scrollbar-face-color: ; 表面颜色
    scrollbar-highlight-color: ; 上/左斜面亮边框颜色
    scrollbar-shadow-color:; 下/右斜面暗边框颜色

     


    下面是由我今天做的滚动条样式生成器B生成的滚动条代码, 请参考或实践.


    <div style="overflow:auto; width:98%; height:100px; line-height:15px; border-width:1px; border-color:#ffccff; border-style:dotted; scrollbar-base-color:#ff66ff; scrollbar-face-color:none; scrollbar-arrow-color:none; scrollbar-track-color:#ffefff; scrollbar-3dlight-color:#ffffff; scrollbar-darkshadow-color:#ffffff; scrollbar-highlight-color:#f5d8f5; scrollbar-shadow-color:#e5c8e5"><br/>
    <div>&nbsp;这里为文字输入区<br/>&nbsp;这里为文字输入区<br/>&nbsp;这里为文字输入区<br/>&nbsp;这里为文字输入区<br/>&nbsp;这里为文字输入区<br/><br/><br/>
    </div>
    </div>


    最终实现效果:


     这里为文字输入区
     这里为文字输入区
     这里为文字输入区
     这里为文字输入区
     这里为文字输入区


     
    此外我还做了滚动条样式生成器A 如果感兴趣请自行试验 呵呵

    滚动条样式生成器A 的特点是及时应用, 能及时看到效果
    滚动条样式生成器B 的特点是选色可以作为一个单独的选色器来使用[该选色器我引用的是一个普通的web控件].
     
    Enjoy!
     
    5/14/2006 6:25:04 PM | View trackbacks (17) | Blog it | MSN Spaces

    Comments (302)

    Please wait...
    Sorry, the comment you entered is too long. Please shorten it.
    You didn't enter anything. Please try again.
    Sorry, we can't add your comment right now. Please try again later.
    To add a comment, you need permission from your parent. Ask for permission
    Your parent has turned off comments.
    Sorry, we can't delete your comment right now. Please try again later.
    You've exceeded the maximum number of comments that can be left in one day. Please try again in 24 hours.
    Your account has had the ability to leave comments disabled because our systems indicate that you may be spamming other users. If you believe that your account has been disabled in error please contact Windows Live support.
    Complete the security check below to finish leaving your comment.
    The characters you type in the security check must match the characters in the picture or audio.

    To add a comment, sign in with your Windows Live ID (if you use Hotmail, Messenger, or Xbox LIVE, you have a Windows Live ID). Sign in


    Don't have a Windows Live ID? Sign up

    Picture of Anonymous
    （没有名字） wrote:
    网站建设服务

    资深服务商：主要服务 北京网站建设，网站制作，网站优化，域名注册,虚拟主机，北京网站制作! 你的空间很好看，有时间也去我的空间看下，谢谢！

    Nov. 10
    No namewrote:
    Oct. 24
    No namewrote:

    Hi,Do you need advertising displays, screen advertisings, digital sign, digital signages and LCDs? Please go Here:www.amberdigital.com.hk(Amberdigital).we have explored and developed the international market with professionalism. We have built a widespread marketing network, and set up a capable management team dedicated to provide beyond-expectation services to our customers.

    amberdigital Contact Us

    website:www.amberdigital.com.hk
    alibaba:amberdigital.en.alibaba.com[ifacffedhfadh]

    Sept. 23
    No namewrote:
    Sept. 17
    No namewrote:
    To the global wow gold the cheapest wow power leveling under the cheapest single-site! -27116530436499
    Sept. 14
    No namewrote:

    Amberdigital Branch,Southern Stars Enterprises Co is specializing in the development and manufacturing of mp4 advertisement players, SD card players and advertisement LCD displays. Established in 1996, we have explored and developed the international market with professionalism. We have built a widespread marketing network, and set up a capable management team dedicated to provide beyond-expectation services to our customers.

    amberdigital Contact Us
    Southern Stars Enterprises Co (Hong Kong Office)
    Add:3 Fl, No.2, Lane 2, Kam Tsin Tsuen, Sheung Shui, Hong Kong
    Tel:+852 2681 4099
    Fax:+852 2681 4586

    Southern Stars Enterprises Co (Shenzhen Office)
    Add:DE, 16/F, Building 2, Nanguo Tower, Sungang Road, Shenzhen, China
    Tel:+86 755 2592 9100
    Fax:+86 755 2592 7171

    E-mail:sstar@netvigator.com
    website:www.amberdigital.com.hk
    alibaba:amberdigital.en.alibaba.com[ba

    Aug. 24
    ʂİχμαη ωμwrote:
    受益匪浅 太感谢了(*･ω･)
    June 30
    培培wrote:
    没看懂
    June 14
    mengyao YUwrote:
    it is not enjoyfulat all, i give up!
    May 31
    evelynwrote:
    怎么办?我太笨了! 还是不会哦!　怎么条滚动条的颜色？　请告知！thank you!
    May 23
    Keenwrote:
    thank you
    May 17
    找水的鱼儿~wrote:
    借用了，谢谢
    May 9
    星児◇..(你我虚​无的角落)wrote:
    别以为网络是虚幻的，情感就是虚幻的? ü Y T ? ε ф μ ξ ζ ω Ω ψ Ψ
    May 7
    George Wallac guanwrote:
    太复杂了,还是简单点好,呵呵
    May 3
    Aili Wangwrote:
    很棒啊，还可以任意改变颜色。谢谢
    Apr. 30
    bikyowrote:
    汗~~
    Apr. 29
    ~*魔法天使~~wrote:
    没有看懂，好难哦。
    Apr. 27
    Iris♥艾丽丝wrote:
    oh my god>_<
     
    Apr. 21
    yuziwrote:
    哇~~~好象很复杂哦~~晕~~
    Apr. 12
    ZlyTumewrote:
    滚动条上面加flash,选哪一个就放哪个flash,how operation?
    Apr. 5
    Next >    Last >>