• 105152

    文章

  • 803

    评论

  • 12

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

前端给div加滚动条样式修改

撸了今年阿里、腾讯和美团的面试,我有一个重要发现.......>>

本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=jkcckj&title=%E5%89%8D%E7%AB%AF%E7%BB%99div%E5%8A%A0%E6%BB%9A%E5%8A%A8%E6%9D%A1%E6%A0%B7%E5%BC%8F%E4%BF%AE%E6%94%B9

<!DOCTYPE html>
<html lang="en">
      <head>
            <meta charset="UTF-8">
            <title>滚动条示例</title>
            <style type="text/css">
                  .nui-scroll {
                        margin-left: 100px;
                        border: 1px solid #000;
                        width: 200px;
                        height: 100px;
                        overflow: auto;
                  }
                  
                  .nui-scroll::-webkit-scrollbar {
                        width: 8px;
                        height: 8px;
                  }
                  /*正常情况下滑块的样式*/
                  
                  .nui-scroll::-webkit-scrollbar-thumb {
                        background-color: rgba(0, 0, 0, .05);
                        border-radius: 10px;
                        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
                  }
                  /*鼠标悬浮在该类指向的控件上时滑块的样式*/
                  
                  .nui-scroll:hover::-webkit-scrollbar-thumb {
                        background-color: rgba(0, 0, 0, .2);
                        border-radius: 10px;
                        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
                  }
                  /*鼠标悬浮在滑块上时滑块的样式*/
                  
                  .nui-scroll::-webkit-scrollbar-thumb:hover {
                        background-color: rgba(0, 0, 0, .4);
                        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
                  }
                  /*正常时候的主干部分*/
                  
                  .nui-scroll::-webkit-scrollbar-track {
                        border-radius: 10px;
                        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
                        background-color: white;
                  }
                  /*鼠标悬浮在滚动条上的主干部分*/
                  
                  .nui-scroll::-webkit-scrollbar-track:hover {
                        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
                        background-color: rgba(0, 0, 0, .01);
                  }
            </style>
      </head>
      <body>
            <div class="nui-scroll">
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <br/> 123
                  <!--这里有好多上面这结构为了节省篇幅就省去了-->
            </div>
      </body>
</html>

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=jkcckj&title=%E5%89%8D%E7%AB%AF%E7%BB%99div%E5%8A%A0%E6%BB%9A%E5%8A%A8%E6%9D%A1%E6%A0%B7%E5%BC%8F%E4%BF%AE%E6%94%B9


695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

0条评论

Loading...


自定义皮肤 主体内容背景
打开支付宝扫码付款购买视频教程
遇到问题联系客服QQ:419400980
注册梁钟霖个人博客