滚动条的浮现与消失 -- scroll & mousewheel

需求来源

在滚动区域中滚动条在滚动的时候展示，非滚动的时候消失 （overflow-y ）

js原生相关事件

• scroll 滚动事件，当滚动条滚动的时候，触发的事件
• mousewheel/DOMMouseScroll 滚轴 事件，可以认为是鼠标滚轮滚动事触发

设计开始

• base vue2.X,但是事件使用无关框架

• 滚动条的展示与影藏

// 标记滚动状态，滚动的时候，展示滚动条；反之，则隐藏
if (this.isWheeling) {
    return 'overflow-y: auto; height:' + this.calHeight + 'px;';
} else {
    return 'overflow-y: hidden; height:' + this.calHeight + 'px;';
}

• 滚动事件还是滚轮事件？

当滚动条影藏的时候（overflow-y: hidden），无法触发scroll事件，放弃~ 选择mousewheel 事件, 进行滚动，不滚动，2500ms后影藏。

    // ...
        bindWheelEvents() {
            const bodyWrapper = this.$el;
            console.log('bindScrollEvents', bodyWrapper);
            bodyWrapper && bodyWrapper.addEventListener('mousewheel', this.mouseWheelFun, true);
        },
        unbindWheelEvents() {
            const bodyWrapper = this.$el;
            bodyWrapper && bodyWrapper.removeEventListener('mousewheel', this.mouseWheelFun, true);
        },
        mouseWheelFun() {
            if (!this.isWheeling) {
                this.isWheeling = true;
            }
            this._clearWheelTimerFun();
            this.wheelTimer = setTimeout(() => {
                this.isWheeling = false;
                }, 2500);
        },
        _clearWheelTimerFun() {
            if (this.wheelTimer) {
                clearTimeout(this.wheelTimer);
                this.wheelTimer = null;
            }
        }

• 功能完成咯，完结撒花~

• 拖动滚动条，怎么也消失了？【重点】

发现了知识点： 拖动滚动条的时候，并没有触发 mosewheel, 但是scroll 事件会响应，这下好了，居然两事件都跑不掉，那就加事件。

    // ...
        bindScrollEvents() {
            const bodyWrapper = this.$el;
            console.log('bindScrollEvents', bodyWrapper);
            bodyWrapper && bodyWrapper.addEventListener('scroll', this.scrollFun, true);
        },
        unbindScrollEvents() {
            const bodyWrapper = this.$el;
            bodyWrapper && bodyWrapper.removeEventListener('scroll', this.scrollFun, true);
        },
        scrollFun(event) {
            this.mouseWheelFun(event, normalizeWheel(event));
        }

• 又出现意外，直接绑定scroll事件并不能响应，overflow-y: hidden 下滚动条是无法响应的，所以加载scroll事件就出现了时机问题 - 滚轮滚动了，就加滚动事件（有点绕口）

    watch: {
         // 根据滚动状态，绑定/取消事件
        isWheeling(val) {
            if (val) {
                this.bindScrollEvents();
            } else {
                this.unbindScrollEvents();
            }
        }
    },
    // ...
        bindScrollEvents() {
            const bodyWrapper = this.$el;
            console.log('bindScrollEvents', bodyWrapper);
            bodyWrapper && bodyWrapper.addEventListener('scroll', this.scrollFun, true);
        },
        unbindScrollEvents() {
            const bodyWrapper = this.$el;
            bodyWrapper && bodyWrapper.removeEventListener('scroll', this.scrollFun, true);
        },
        scrollFun(event) {
            this.mouseWheelFun(event);
        }

这下终于完成了，有问题大家在评论区交流吧！ 完结撒花~