前言
今天读到了CSS揭秘的第六章， 发现了一个很有用的方法来实现滚动条滑动时通过颜色来提示用户是否可以向上或者向下滑动。 这里我们需要使用到background属性方面的知识。
正文
首先 我们先写一个demo，包含滑动区域的这种。
.demo {
width: 400px;
height: 400px;
border: 1px solid red;
line-height: 1.5em;
font-size: 24px;
overflow-y: auto;
}
<ul class="demo">
<li>hahahahah ------ 11</li>
<li>hahahahah ------ 12</li>
<li>hahahahah ------ 13</li>
<li>hahahahah ------ 14</li>
<li>hahahahah ------ 15</li>
<li>hahahahah ------ 16</li>
<li>hahahahah ------ 17</li>
<li>hahahahah ------ 18</li>
<li>hahahahah ------ 19</li>
<li>hahahahah ------ 20</li>
<li>hahahahah ------ 21</li>
<li>hahahahah ------ 22</li>
<li>hahahahah ------ 23</li>
<li>hahahahah ------ 24</li>
</ul>
复制代码首先我们可以回顾一下如何实现滑动时出现的上下阴影。background-image radial-gradient
我们在demo中添加这样几行代码
background:
radial-gradient(at top, rgba(0, 0, 0, 3), transparent 70%) 0 0,
radial-gradient(at bottom, rgba(0, 0, 0, 3), transparent 70%) 0 100%;
background-repeat: no-repeat;
background-size: 100% 15px;
复制代码再看demo变成现在的样子
background-attachment。 我们可以将阴影层设置为local，这样遮罩层会固定在固定在元素对应的位置。
为了方便调整，我们可以将背景图的位置信息和 渐变层写在一起。
那么我们的demo修改为如下代码
.demo {
width: 400px;
height: 400px;
border: 1px solid red;
line-height: 1.5em;
font-size: 24px;
overflow-y: auto;
background:
linear-gradient(white, white) 0 0 local,
radial-gradient(at top, rgba(0, 0, 0, 3), transparent 70%) 0 0 scroll,
linear-gradient(white, white) 0 100% local,
radial-gradient(at bottom, rgba(0, 0, 0, 3), transparent 70%) 0 100% scroll;
background-repeat: no-repeat;
background-size: 100% 15px;
}
复制代码这时候你可以发现上边的阴影已经实现了我们的效果，滑动的时候如果下面有内容显示阴影作为提示。 但是底部的阴影是一直存在，直到我们滑动到最底部的时候才隐藏掉。
为了解决这个问题 我们可以在相对于窗口的底部新建一个线性渐变以隐藏底部阴影。
background改造如下
background:
linear-gradient(white, white) 0 0 local,
radial-gradient(at top, rgba(0, 0, 0, 3), transparent 70%) 0 0 scroll,
linear-gradient(white, white) 0 385px local,
linear-gradient(white, white) 0 100% local,
radial-gradient(at bottom, rgba(0, 0, 0, 3), transparent 70%) 0 100% scroll;
复制代码此时就可以做到我们开头gif的效果了。 当然在其中你可能会疑惑 这个新家的遮罩层会不会在移动到顶部的时候遮盖住顶部， 不用担心哦， 渐变也是存在优先级的，越写在前面的优先级就越高。 所以即使很长也不会出现问题哦。
