zoukankan      html  css  js  c++  java
  • 2018给网页滚动条变色的新方法

    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style type="text/css">
    /*IE浏览器开始*/
    body{
    scrollbar-arrow-color: #b1004d; /*三角箭头的颜色*/
    scrollbar-face-color: #FC4453; /*立体滚动条的颜色(包括箭头部分的背景色)*/
    scrollbar-3dlight-color: #fff; /*立体滚动条亮边的颜色*/
    scrollbar-highlight-color: #fff; /*滚动条的高亮颜色(左阴影)*/
    scrollbar-shadow-color: #64e664; /*立体滚动条阴影的颜色*/
    scrollbar-darkshadow-color: #fff; /*立体滚动条外阴影的颜色*/
    scrollbar-track-color:#ffc940; /*立体滚动条背景颜色*/
    scrollbar-base-color:#fff; /*滚动条的基色*/
    }
    /*IE浏览器结束*/
    /*谷歌浏览器开始*/
        body {
            overflow:auto;
        } 
        body::-webkit-scrollbar {
            width:10px;
            height:10px;
        }
        body::-webkit-scrollbar-button    {
            background-color:#FF7677;  /*三角箭头的颜色*/
        }
        body::-webkit-scrollbar-track     {
            background:#FF66D5; /*背景*/
        }
        body::-webkit-scrollbar-track-piece {
            background:#FF66D5; /*背景*/
        }
        body::-webkit-scrollbar-thumb{
            background:#FFA711; /*滚动条的基色*/
     border-radius:4px; 

    }
    body::-webkit-scrollbar-corner
    {
    background
    :#82AFFF;

    }
    body::-webkit-scrollbar-resizer
    {
    background:#FF0BEE;

    } /*谷歌浏览器结束*/

    </style>
    </head>
    <body>

    <div style="50px;"> <p>人们常说,酒逢知己千杯少。 找到合适的沟通对象不容易。我说什么你听得懂,你说什么我也听得懂……这太幸福了,因为平时遇到的人大多并不是如此的,大家各自都不在一个频道上,别说分歧了,处理误解就要耗费大量精力。好不容易遇到一个看起来在同一个频道上的人,再一高兴,喝点酒,两个人的频道分辨多少有些失灵,至少没那么准确了,于是更开心了,我说什么都当你听得懂,你说什么也都当我听得懂——已经顾不上对方是否真的听得懂了……所以,一杯不够,十杯还是不够,就让频道分辨模糊来得更猛烈一些吧!一千杯算什么?! 这就是绝大多数人的有效沟通。 真正的有效沟通指的究竟是什么? 有效沟通是指一方能让另一方轻松弄明白他原本并不明白的东西。也就是说,双方互相说的和听的,若原本就是各自都了解的东西,那真的谈不上是有效沟通,那只不过是基本交流。 这也是为什么在众多的语言修辞方式中,人们特别偏爱类比的根本原因。类比的使用机理是这样的: 为了让对方明白他现在不明白的X,找一个他原本熟悉的A;然后告诉他在某些方面来看,X就约等于A;再把A与X想像的地方讲清楚;最后X的那一方面就不言自明了。 好的类比,精确地类比,本质作用就是在已知与未知的鸿沟之上搭建一座虚拟的桥,帮助思考完成穿越。 绝大多数被评价为共同能力强的人,都特别擅长使用类比。</p> </div> </body> </html>

     支持谷歌和IE,不支持火狐

    参考文章:https://www.lyblog.net/detail/314.html

    http://www.cnblogs.com/yclblog/p/6806496.html

    http://www.cnblogs.com/wswq/p/6251826.html

    关于火狐浏览器的滚动条变色需要使用JavaScript来实现,大家可以借鉴这篇文章  http://www.cnblogs.com/wswq/p/6251826.html  ,里面有利用JavaScript实现滚动条变色的代码,大家可以使用JavaScript来判断浏览器的类型,然后调用不同的css文件,本人没用里面的代码,因为虽然实现了火狐浏览器的滚动条变色,但是原来的滚动条的部分功能不能用了,从而会降低用户体验。

    关于兼容问题:如果你使用的是WordPress搭建的网站,可以使用 Custom scrollbar (彩色滚动条) WordPress插件,这个插件不存在浏览器兼容问题,我的网站就是使用的这个插件,大家可以看看效果:sheji.xinlvtian.com

     

    Custom scrollbar插件使用方法

  • 相关阅读:
    安装node.js webkit环境[一]
    wpf 窗口最小化后,触发某事件弹出最小化窗口并置顶
    c# 旋转图片 无GDI+一般性错误
    类库里面添加日志记录 log4net
    string转xml
    DES c#加密后java解密
    使用排序字典排序
    怎么让一段xml被识别为字符串
    新装iis 页面503错误 DefaultAppPool停止解决方案
    hession
  • 原文地址:https://www.cnblogs.com/xinlvtian/p/8484197.html
Copyright © 2011-2022 走看看