美文网首页
滚动条的浮现与消失 -- scroll & mousewheel

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

作者: suliang2010 | 来源:发表于2022-07-28 11:17 被阅读0次

需求来源

在滚动区域中滚动条在滚动的时候展示,非滚动的时候消失 (overflow-y )

js原生相关事件

设计开始

  • 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);
        }

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

相关文章

网友评论

      本文标题:滚动条的浮现与消失 -- scroll & mousewheel

      本文链接:https://www.haomeiwen.com/subject/xvgtwrtx.html