<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<meta name="viewport" content="width=device-width, initial-scale=1.0">
???<meta http-equiv="X-UA-Compatible" content="ie=edge">
???<title>Document</title>
</head>
<body>
???<!DOCTYPE html>
???<html lang="en">
???<head>
???????<meta charset="UTF-8">
???????<meta name="viewport" content="width=device-width, initial-scale=1.0">
???????<meta http-equiv="X-UA-Compatible" content="ie=edge">
???????<title>Document</title>
???</head>
???<body>
???????<ul>
???????????<li>12</li>
???????????<li>2</li>
???????????<li>3</li>
???????????<li>4</li>
???????????<li>5</li>
???????????<li>6</li>
???????????<li>7</li>
???????????<li>8</li>
???????????<li>9</li>
???????????<li>10</li>
???????????<li>11</li>
???????????<li>12</li>
???????????<li>13</li>
???????????<li>14</li>
???????????<li>15</li>
???????????<li>16</li>
???????????<li>17</li>
???????????<li>18</li>
???????????<li>19</li>
???????????<li>20</li>
???????</ul>
???????<style>
???????????* {
???????????????margin: 0;
???????????????padding: 0;
???????????}
???????????html,
???????????body {
???????????????width: 100%;
???????????????height: 100%;
???????????}
???????????ul {
???????????????transition: all .5s;
???????????????width: 200px;
???????????????height: 300px;
???????????????margin: 30px auto;
???????????????list-style: none;
???????????????overflow-y: scroll;
???????????}
???????????li {
???????????????width: 100%;
???????????????height: 30px;
???????????????border-bottom: 1px solid #aaa;
???????????}
???????????li:hover {
???????????????background: #eee;
???????????}
???????????*::-webkit-scrollbar,
???????????*::-webkit-scrollbar-thumb {
???????????????width: 26px;
???????????????border-radius: 13px;
???????????????background-clip: padding-box;
???????????????border: 10px solid transparent;
???????????}
???????????*::-webkit-scrollbar-thumb {
???????????????box-shadow: inset 0 0 0 10px;
???????????}
???????????ul:hover {
???????????????color: rgba(0, 0, 0, 0.3);
???????????}
???????????ul {
???????????????background: white;
???????????????padding: 20px;
???????????????width: 200px;
???????????????height: 300px;
???????????????margin: 100px auto;
???????????????border-radius: 3px;
???????????????overflow: auto;
???????????????color: rgba(0, 0, 0, 0);
???????????????text-shadow: 0 0 black;
???????????????box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
???????????????transition: color .3s ease;
???????????}
???????</style>
???</body>
???</html>
</body>
</html>
用css实现自定义带有过渡和隐藏效果的滚动条
原文地址：https://www.cnblogs.com/lyls/p/9833702.html