• 64160

    文章

  • 632

    评论

  • 59

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下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


 转载至链接:https://my.oschina.net/u/4181724/blog/3089597。

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

欢迎来到梁钟霖个人博客网站。本个人博客网站提供最新的站长新闻,各种互联网资讯。 还提供个人博客模板,最新最全的java教程,java面试题。在此我将尽我最大所能将此个人博客网站做的最好! 谢谢大家,愿大家一起进步!

转载原创文章请注明出处,转载至: 梁钟霖个人博客www.liangzl.com

0条评论

Loading...


发表评论

电子邮件地址不会被公开。 必填项已用*标注

自定义皮肤
注册梁钟霖个人博客