滚动提示

by 苹果熊

HTML

<div class="list">
  <ul>
    <li>1</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>
</div>

CSS

body {
  background: #fff;
}
.list {
  width: 200px;
  margin: 50px;
}
ul {
  overflow: auto;
  height: 10em;
  padding: .3em .5em;
  border: 1px solid #ddd;
  background: linear-gradient(white 10px, hsla(0,0%,100%,0)) 0 0 / 100% 50px,
	            radial-gradient(at top, rgba(0,0,0,.2), transparent 70%) 0 0 / 100% 10px,
	            linear-gradient(to top, white 10px, hsla(0,0%,100%,0)) bottom / 100% 50px,
	            radial-gradient(at bottom, rgba(0,0,0,.2), transparent 70%) bottom / 100% 10px;
	background-repeat: no-repeat;
	background-attachment: local, scroll, local, scroll;
}
li {
  line-height: 2;
  color: #999;
  border-bottom: 1px solid #eee;
}

::-webkit-scrollbar {
    width: 5px;
    height: 0;
    background: transparent;
}
::-webkit-scrollbar-thumb:vertical {
    background: #ccc;
    border-radius: 10px
}
::-webkit-scrollbar-thumb:vertical:hover {
    background: #aaa
}