CSS给div设置滚动条

div 加滚动条的两种方法：

我的使用：
overflow:hidden;
overflow:scroll;

一、注意

记住宽和高一定要设置噢，否则不成的

不过在不超出时，会有下面的滚动条，所以不是最好的选择

二、HTML

<div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div>

记住宽和高一定要设置噢，否则不成的

这样比较好的是，在宽和高不超出时，只是一条线

三、说明

直接为div指定overflow属性为auto即可，但是必须指定div的高度，如下：

如果要出现水平滚动条，则： overflow-x:auto

同理，垂直滚动条为： overflow-y:auto

如果该div被包含在其他对象例如td中，则位置可设为相对：position:relative

四、(1)方案一：自定义滚动条（通用className="scrollbar"）：

  /*滚动条整体样式*/
  .scrollbar::-webkit-scrollbar {
    /*高宽分别对应横竖滚动条的尺寸*/
      width: 10px;    
      height: 1px;
  }
  .scrollbar::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius:0 2em 2em 0;
    background-color: #C0B7F5;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, 
    transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, 
    rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  }
  .scrollbar::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius:0 2em 2em 0;
    background: #EDEDED;
  }

(2)方案二：自定义滚动条（通用 .scroll (); ）：

 // 滚动条
  .scroll {
    &::-webkit-scrollbar {
      width: 10px;
      overflow: hidden;
      border-radius: 0 18px 18px 0;
      background: rgba(219, 219, 219, 1);
    }
    &::-webkit-scrollbar-thumb {
      border-radius: inherit;
      background-color: rgba(192, 183, 245, 1);
    }
  }