css美化滚动条

一、滚动条出现的地方
1、浏览器边框，当页面内容超过浏览器视窗大小；
2、textarea，内容过多时；
3、iframe；
4、div或任何block元素，当它们的被设定成overflow属性时。

二、css设置

::-webkit-scrollbar {
  width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255, 0, 0, 0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255, 0, 0, 0.4);
}
.container {
    width: 300px;
    height: 300px;
    background-color: #DCDCDC;
    overflow: scroll;
    overflow-x: hidden;
    /* showing scrollbars */
}

三、html

<div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. In hac</p>
    <p>Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.</p>
    <p>Praesent sodales, sapien sit amet congue egestas, sem ligula ornare massa, vitae suscipit felis ligula quis velit. Phasellus lectus massa, sodales ac vulputate ac, pharetra quis lacus. Morbi tempus pretium nisi sed pretium. Pellentesque dictum volutpat vulputate. Fusce dapibus sagittis felis, ut consequat nisi posuere id. Cras elit orci, vehicula in sagittis a, faucibus vitae dui. Nunc non lorem in metus adipiscing adipiscing non a sapien. Sed dictum ultrices nibh in tristique.</p>
   <p>Sed mollis justo enim, ut pharetra nunc. Fusce vehicula viverra magna, et fringilla lectus porta quis. Donec eu fermentum mi. Donec congue pellentesque iaculis. Phasellus est leo, cursus eget consectetur in, tristique sit amet tortor. Cras eleifend commodo hendrerit elementum. Donec porta faucibus ligula non blandit. In ultrices vehicula pretium.</p>
</div>

四、 鼠标移入，就显示滚动条，鼠标移出，就不显示

:-webkit-scrollbar {
      width: 4px;
      height: 4px;
      background-color: rgba(0, 0, 0, 0);
      overflow: hidden;
      border-radius: 3px;
}
:-webkit-scrollbar-track {
      margin-right: 2px;
      overflow: hidden;
}
:-webkit-scrollbar-corner {
      -webkit-appearance: none;
}
:-webkit-scrollbar-thumb {
      border-radius: 3px;
      width: 4px;
      -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, .1);
      background-color: rgba(0, 0, 0, 0);
      -webkit-appearance: none;
      box-shadow: inset 0 0 0 4px;
}