zoukankan      html  css  js  c++  java
  • css中设置scroll的颜色

    直接粘代码拉,这个仅仅适用于IE 转载请注明 http://netsos.cnblogs.com/
    div
    {
      scrollbar-3dlight-color:#000000;
      scrollbar-highlight-color:#cccccc;
      scrollbar-face-color:#000000;
      scrollbar-arrow-color:#ffffff;
      scrollbar-shadow-color:#666666;
      scrollbar-darkshadow-color:#999999;
      scrollbar-track-color:#dddddd;
      height:100px;
      400px;
      padding:100px 0 0 0;
      border:1px solid #666666;
      overflow:scroll;
    }
    </style>
    </head>
     
    <body> 
      
    <div>这里是元素内容部分<br />
    这里是元素内容部分<br />
    这里是元素内容部分<br />
    这里是元素内容部分<br />
    这里是元素内容部分<br />
    这里是元素内容部分<br />
    这里是元素内容部分<br />
    这里是元素内容部分<br />
    </div>
    </body>

     火狐的还没试呢,看看吧

    强制Firefox显示滚动条:

    方法一:html {overflow:-moz-scrollbars-vertical;}

    方法二:html {min-height:101%;}

    为什么要强制显示滚动条?因为在Firefox你会发现页面在没有加载完全的时候是没有滚动条的,当加载完成后滚动条才显示出来,所以会感觉页面偏移了下。

     转载请注明 http://netsos.cnblogs.com/

    另辟蹊径:使用Jquery

    <script type=”text/javascript” src=”jquery-1.1.3.1.js”></script>
    <script type=”text/javascript” src=”jquery.linscroll.js” ></script>

     
    <script type=”text/javascript”>
        $(document).ready(
            
    function(){
                $(‘#smsContent’).setScroll( 
    //可根据DIV的ID,class进行控制显示。
                    {img:'scroll_bk.gif’,10},//background-image and width
                    {img:'scroll_arrow_up.gif’,height:3},//up image
                    {img:'scroll_arrow_down.gif’,height:3},//down image
                    {img:'scroll_bar.gif’,height:25}//bar image
                );
                }
            );
       
        
    </script>

    Html代码:

    <div id=”smsContent” style=”140px;overflow:hidden;height:170px;”>
     一名黑客日前宣称,他已经破解了苹果CE名黑客自称“orin0co”.他表示,他通过钓 鱼的方式获取了乔布斯在亚马逊上的账号密码.历史记录显示,乔布斯过去10年中在亚马逊上购买了2万件商
     
    </div>

    此插件最大的好处可自定义滚动条的样式,自己加工几张图片就可以了。而且在DIV的内容不超过预设置高度的时候,不会出现滚动条。 

    http://blog.gaoso.com.cn/2009/05/401.html  让我下载,好像还要收一毛钱,艾!~~~~~~~~~~~~

     转载请注明 http://netsos.cnblogs.com/

    还有一个 从其他论坛靠下来的

    把它放到一个css文件中

    @-moz-document url-prefix(http://),url-prefix(https://) {
    /* 滚动条颜色 */
    scrollbar {
       -moz-appearance: none !important;
       background: #00ff00 !important;
    }

    /* 滚动条按钮颜色 */
    thumb,scrollbarbutton {
       -moz-appearance: none !important;
       background-color: #0000ff !important;
    }

    /* 鼠标悬停时按钮颜色 */
    thumb:hover,scrollbarbutton:hover {
       -moz-appearance: none !important;
       background-color: #ff0000 !important;
    }

    /* 隐藏上下箭头 */
    scrollbarbutton {
       display: none !important;
    }

    /* 纵向滚动条宽度 */
    scrollbar[orient="vertical"] {
       min- 15px !important;
    }
    }

     转载请注明 http://netsos.cnblogs.com/

  • 相关阅读:
    PHP设计模式之----简单工厂模式
    PHP设计模式之----单例模式
    php排序算法
    PHP代码实现二分法查找
    Centos 7 下安装PHP7.2(与Apache搭配的安装方式)
    PHPSTORM Live-Templates变量速查表
    Centos 7 设置ip地址
    Centos 7下编译安装Apache
    Centos 7下编译安装Mysql
    apache配置Directory目录权限的一些配置
  • 原文地址:https://www.cnblogs.com/NetSos/p/1750311.html
Copyright © 2011-2022 走看看