自定义显隐滚动条：滚动时显示，不滚动自动隐藏，自定义隐藏时间

#### 背景

根据项目的市场优势，目前的项目UI没有规范化，导致用户体验不好。所以针对的UI方面，需要实现规范化，本次迭代中的一个任务就是针对项目内所有的滚动条，需要按照UI规范实现：滚动时出现滚动条，停留三秒后，自动消失
![UI需求](https://qiniu.program-er.com/blog/typecho/usr/uploads/ui需求.png)

> 由于是旧项目的优化，考虑到全局的滚动条调整，使用vue指令的方法更简单，也不会影响全局样式和业务功能。

> 功能拆解：
> 
> 1. 最简单的方法是利用css的宽度控制进度条显隐效果
> 2. 考虑到element框架中自带的一些表格 表单等组件，可能无法直接将滚动区域挂载到自定义的指令上，所以指令需要支持将滚动区域的元素作为参数，在指令中动态通过class查找到，并进行绑定

---

#### 代码实现

1. 指令封装 directive.js

```javascript
/**
 * 滚动条处理
 */
export const scrollActive = {
    bind (element, binding) {
        // console.log('bind')
    },
    inserted () {
        // console.log('inserted')
    },
    update () {
        // console.log('update')
    },
    componentUpdated (element, binding) {
        try {
            let el = element
            const selector = binding.value?.selector
            if (selector) {
                el = el.querySelector(selector) || el
            }
            const hideScroll = debounce((el) => {
                el.classList.add('dom-scrollbar-hide')
                el.classList.remove('dom-scrollbar-show')
            }, 3000)
            el.classList.add('dom-scrollbar-hide')
            el.addEventListener('scroll', function () {
                if (Array.from(el.classList).includes('dom-scrollbar-show')) {
                    // 滚动条存在，利用防抖，三秒后消失
                    hideScroll(el)
                    return
                }
                el.classList.add('dom-scrollbar-show')
                el.classList.remove('dom-scrollbar-hide')
            })
        } catch (e) {
            console.error('滚动条样式调整失败', e)
        }
    },
    unbind (element, binding) {
        let el = element
        if (el) {
            const selector = binding.value?.selector
            if (selector) {
                el = element.querySelector(selector) || element
            }
            el.removeEventListener('scroll', () => {})
        }
    }
}
```

2. 通过main.js，注册到全局指令

```javascript
import * as directive from './utils/directive'
// 注册全局的指令
Object.keys(directive).forEach((key) => {
    Vue.directive(key, directive[key])
})
```

3. 滚动条通过css控制，写到全局的css文件中

```css
// 这个属性是新出的,文档暂时还查不到,兼容性也不是很好,在需要隐藏滚动条的容器内部使用
.scroll-bar-overlay {
  overflow-y: overlay !important;
}
.dom-scrollbar-show::-webkit-scrollbar{
  width: 8px !important;
}
.dom-scrollbar-hide::-webkit-scrollbar {
  width: 0 !important;
}
```

4. 使用组件到滚动的区域

```html

<div class="c-content-box scroll-bar-overlay" v-scrollActive >
	<li></li>
	<li></li>
	<li></li>
	...
</div>

<div class="draggable" v-scrollActive="{selector: '.el-table__body-wrapper'}">
	<el-table></el-table>
</div>
```

最后修改：2023 年 04 月 24 日