zoukankan      html  css  js  c++  java
  • 使用css改变滚动条样式

    我们平时在浏览页面的时候经常会看到滚动条样式,但是默认各个浏览器的样式是不一样的,所以,我们需要设置统一的滚动条样式。

    自定义以后的滚动条样式效果如下:

    代码如下:

    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <style>
      .demo {
         200px;
        height: 300px;
        background-color: pink;
        overflow: auto;
        margin: 0 auto;
      }
      /* 滚动条样式 demo*/
    .demo::-webkit-scrollbar {
      /*滚动条整体样式*/
       2px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
    
    .demo::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 2px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #ffffff;
    }
    
    .demo::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background: rgba(3, 96, 255, 0.25);
    }
    
    </style>
    <body>
      <div class="demo">
        我是内容我是内容我是内容我是内容<br>
        我是内容我是内容我是内容我是内容<br>
        我是内容我是内容我是内容我是内容<br>
        我是内容我是内容我是内容我是内容<br>
        我是内容我是内容我是内容我是内容<br>
        我是内容我是内容我是内容我是内容<br>
      </div>
    </body>
    
    </html>
    
    
  • 相关阅读:
    自己遇到的冲突及解决方案
    怎么解决代码冲突及切换分支
    程序员修养
    代码回退
    gitlab两种连接方式:ssh和http配置介绍
    gitlab创建项目及分支
    github,gitlab的区别
    代码托管有什么用
    新手搭建云服务器详细过程
    UNP学习笔记(第十一章 名字与地址转换)
  • 原文地址:https://www.cnblogs.com/Bianco/p/13539317.html
Copyright © 2011-2022 走看看