zoukankan      html  css  js  c++  java
  • 8. 滚动条美化

    怎么改变原始丑陋的滚动条呢?

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
          body {
            overflow:scroll;
          }
          /* 针对缺省样式 (必须的) */
         ::-webkit-scrollbar {
            10px;
           height:0px;
         }
         /* 滚动条的滑轨背景颜色 */
        ::-webkit-scrollbar-track {
          background-color: gray;
          border-radius:5px;
        }
        /* 滑块颜色 */
        ::-webkit-scrollbar-thumb {
          background-color: red;
          border-radius:20px;
        }
        /*内层轨道的颜色*/
        ::-webkit-scrollbar-track-piece{
          background-color:gray;
          border-radius:5px;
        }
        /* 滑轨两头的监听按钮颜色 */
        ::-webkit-scrollbar-button {
         background-color:gray;
         0;
         height:0;
       }
       /* 横向滚动条和纵向滚动条相交处尖角的颜色 */
       ::-webkit-scrollbar-corner {
         background-color: black;
       }
       div {
         300px;
         height:200px;
         overflow:scroll;
       }
      </style>
    </head>
    <body>
    <div>
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    </div>
    </body>
    </html>
    

      

  • 相关阅读:
    第三方应用调用应用市场和唤醒APP
    tp5 输入域名即访问指定页面
    反射概述(静态 VS 动态语言)
    自定义注解
    元注解
    内置注解
    什么是注解
    线程小结(代码)
    线程池
    信号灯法
  • 原文地址:https://www.cnblogs.com/wangrui38/p/9504658.html
Copyright © 2011-2022 走看看