前言

彦祖们,首先祝各位元宵节快乐!团团圆圆,阖家幸福!成为彦祖,超越彦祖

言归正传,滚动条场景应该是每一位前端开发者必定接触过的

今天让我们一步步用纯css来优化一下这个滚动条场景

优化前

没错,场景就是这么淳朴

彦祖们有没有发现以下问题

鼠标移入之前,用户无法感知是否存在更多内容,可能会因此忽略滚动功能

优化用户体验

我们的最终目的就是让用户能够感受到当前区域是可滚动的

今天看到这本书里介绍了 Google Reader 的做法

那我们就跟着大佬的思路来实现吧~

效果

先来看下效果

滚动的时候,顶部/底部都会出现蛋蛋的阴影区域

实现一个顶部阴影

接下来,让我们来实现一个顶部阴影效果吧(底部同理)

实现思路

笔者整理了一下大致思路,大概就是这两点

1.滚动到顶部时,区域底部会出现一层淡淡的阴影

2.滚动到中间时,区域顶部会出现一层淡淡的阴影

必要 css 属性介绍

既然我们要用纯css来实现这个指令,就必须先了解下以下几个css属性

1.linear-gradient

线性渐变,这个属性彦祖们应该是比较熟悉的,如果不熟悉的话看下这个

developer.mozilla.org/zh-CN/docs/...

2.radial-gradient

径向渐变和线性渐变差不多,工作中也有用到,不再多做介绍

developer.mozilla.org/zh-CN/docs/...

3.background-attachment

developer.mozilla.org/zh-CN/docs/...

本文核心属性,笔者之前也没有在工作中实际使用过这个属性

今天在书中第一次遇到,那就让我们一起来学习下这个属性吧

它支持三个属性

fixed

此关键属性属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

可以理解为 position:fixed 同理

local

此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

直白点理解就是跟随内容滚动

scroll

此关键属性值表示背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）

这个和 fixed 差不多,相对于元素本身固定,但是会外部滚动条而滚动

代码思路

了解了这三个属性后

我们需要设置两层背景,我们定义它们为遮罩层和阴影层

在滚动到顶部的时候,用遮罩层盖住阴影层

在滚动的时候遮罩层跟着滚动,露出阴影层

得出以下结论:

遮罩层需要跟着内容滚动,那么对应的属性也就是 background-attachment:local

阴影层需要固定在元素本身的顶部,那么对应的属性就是 background-attachment:scroll

看一下大致的代码

css 复制代码

background: 遮罩层,阴影层;
background-attachment:local,scroll;

接下来我们只需要实现遮罩层和阴影层的渐变逻辑就行了

我们使用线性渐变来实现遮罩层,径向渐变来实现阴影层

css 复制代码

background: linear-gradient(white,rgba(0,0,0,0)),
            radial-gradient(at top,rgba(0,0,0,.2),transparent 70%);

当然,遮罩层的高度必须要大于阴影层,我们才能实现完全覆盖

css 复制代码

/* 遮罩层 25px 阴影层 15px */
background-size:100% 25px,100% 15px;

顶部阴影demo

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  ul{
    overflow: auto;
    width:10em;
    height: 8em;
    padding:.3em .5em;
    border: 1px solid silver;
    background: linear-gradient(white,rgba(0,0,0,0)),
    radial-gradient(at top,rgba(0,0,0,.2),transparent 70%)
    ;
    background-repeat: no-repeat;
    /* 遮罩层 25px 阴影层 15px */
    background-size: 100% 25px,100% 15px;
    background-attachment: local,scroll;
  }
</style>
<body>
  <ul>
    <li>Ada Catlace</li>
    <li>Alan Purring</li>
    <li>Ada Lovelace</li>
    <li>Alon Turing</li>
    <li>Void</li>
    <li>Neko</li>
    <li>NaN</li>
    <li>Ada Catlace</li>
    <li>Alan Purring</li>
    <li>Ada Lovelace</li>
    <li>Alon Turing</li>
    <li>Void</li>
    <li>Neko</li>
    <li>NaN</li>
  </ul>
</body>
</html>

底部阴影

既然我们已经实现了顶部阴影效果,那么底部阴影也呼之欲出了

这里直接贴上核心代码

css 复制代码

background: linear-gradient(white,rgba(0,0,0,0)),
    radial-gradient(at top,rgba(0,0,0,.2),transparent 70%),
    linear-gradient(to top,white,rgba(0,0,0,0)) bottom,
    radial-gradient(at bottom,rgba(0,0,0,.2),transparent 70%) bottom
    ;
background-size: 100% 25p'x,100% 15px,100% 25px,100% 15px;
background-attachment: local,scroll,local,scroll;

这样我们就实现了一个滚动阴影提示效果

封装 vue 指令

其实代码有了,封装指令就非常简单了,直接贴上完成代码吧

彦祖们可以根据实际需求,自己改造一下这个指令

js 复制代码

export const scrollingHints = {
  bind (el, binding) {
    el.style.background = `linear-gradient(white,rgba(0,0,0,0)),
    radial-gradient(at top,rgba(0,0,0,.2),transparent 80%),
    linear-gradient(to top,white,rgba(0,0,0,0)) bottom,
    radial-gradient(at bottom,rgba(0,0,0,.2),transparent 80%) bottom`
    el.style['background-repeat'] = 'no-repeat'
    el.style['background-size'] = '100% 25px,100% 15px,100% 25px,100% 15px'
    el.style['background-attachment'] = 'local,scroll,local,scroll'
  }
}

使用方式

js 复制代码

<div v-scrolling-hints></div>

写在最后

用户对我们的产品来讲可以说是衣食父母了,叫一声义父不过分吧?

不考虑用户体验的产品就是孤儿产品

前端开发绝不是写写界面样式那么简单,我们要努力的地方还有很多

感谢彦祖们的阅读

个人能力有限

如有不对,欢迎指正 🌟 如有帮助,建议小心心大拇指三连🌟

一个 vue 指令,帮你优化滚动条场景

前言

优化前

优化用户体验

效果

实现一个顶部阴影

实现思路

必要 css 属性介绍

代码思路

顶部阴影demo

底部阴影

封装 vue 指令

使用方式

写在最后