vue 实现页面内滚动条滑动时 按钮隐藏，滚动条停止时按钮显示

做到一个功能页面有个区域可以上下左右滑动，当滚动条上下或者左右滑动时按钮需要向下一动，隐藏起来，当滚动条停止滚动后，按钮在从下到上显示出来

1.获取可滚动条元素并增加监听事件

let scrollview = this.$refs['tableRef'];
scrollview.addEventListener('scroll', this.handleScroll, true);

2.触发滚动后逻辑函数

handleScroll (e) {
    
    if(!this.times) {
        let self = this;

        let scrollX = this.$refs.tableRef.scrollTop;
        let scrollY = this.$refs.tableRef.scrollLeft;
        if(this.oldScrollX === scrollX && this.oldScrollY === scrollY) return;

        self.isSliding = true;

        self.times = setInterval(() => {
        let scrollTop = self.$refs.tableRef.scrollTop;
        let scrollTopX = self.$refs.tableRef.scrollLeft;
        // 如果旧的和新的位置相等，滚动已经停止
        if(self.oldScrollY === scrollTop && self.oldScrollX === scrollTopX) {
            self.isSliding = false;
            clearInterval(self.times);
            self.times = null;
        } else {
            self.oldScrollY = scrollTop; // 旧的纵向滚动条位置
            self.oldScrollX = scrollTopX; // 就得横向滚动条位置
        }
        }, 50)
    }
}

我这里的场景是在app内需要次功能

3.页面的显隐按钮及样式

<div :class="['bottom_btn', isSliding ? 'bb_bottom' : '']">
    <div>显隐的按钮</div>
</div>

.bottom_btn {
    width: 100%;
    padding: 8px 0 11px 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
    transition: .3s;

    div {
    width: calc(100% - 110px);
    height: 40px;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 40px;
    text-align: center;
    margin: 0 auto;
    background: #41AFFF;
    border-radius: 21px;
    border: 1px solid #0094FF;
    box-shadow: 0px 2px 7px 0px rgba(86,130,175,0.5);
    }
}
.bb_bottom {
    bottom: -100px;
}