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 hacp>
  </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>
  <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>
  <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>
  </p>
</div>