无限下拉滚动条设置，滚动监听上拉滚动条设置置底_watch监听滚动条滚动事件

当我们使用滚动监听，并由无限滚动上下滑动，同时兼顾发送请求

那么这是就会出现一个问题
如何在请求到数据，并渲染完dom操作，将滚动条设置到我们想要的地方

核心技术：watch 监听 + $nextTick（）
下面上代码

监听

 mounted() {
        this.box = this.$refs.container
        // 监听这个dom的scroll事件
        this.box.onscroll = cardList => {
            this.handleScroll(cardList)
        }
    },
1
2
3
4
5
6
7

监听函数

handleScroll: throttle(100, function (cardList) {
            this.$nextTick(() => {
                const scrollData = this.$refs.container
                const viewH = scrollData.clientHeight // 可见高度
                const contentH = scrollData.scrollHeight // 总高度
                const scrollTop = scrollData.scrollTop // 滚动高度
                // 下滑到底部时 Math.ceil为了兼容浏览器差别
                if (viewH + Math.ceil(scrollTop) > contentH ) {
                    // console.log(scrollTop, contentH, viewH)
                   你想做的事
                } else if (Math.ceil(scrollTop) == 0) {
                    // 上滑到顶部时
                    你想做的事
                } else {
                    const cardList = [...document.querySelectorAll('.Bracket .item')] ?? []
                    for (let index = cardList.length - 1; index >= 0; index--) {
                        const card = cardList[index]
                        // if (card.id.split('-')[1] < this.currentMainTermIndex) break
                        if (scrollTop - card.offsetTop >= 0) {
                            滑动到你的class div 做的事
                            break
                        }
                    }
                }
            })
        }),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

滚动条设置

 watch: {
       
        // 滚动条设置
        监听数据(或请求回来的数据): {
            handler() {
                    this.$nextTick(() => {
                        const scrollData = this.$refs.container
                        scrollData.scrollTop = 10
                        // 滚动条设置
                    })
                }
            deep: true,
        },
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

最后别忘了组件销毁清除监听器

 destroyed() {
        document.removeEventListener('scroll', this.handleScroll)
    },
1
2
3