vue的滚动监听事件

ゝ一纸荒年。 2022-12-18 10:51 239阅读 0赞

scrollGet(e) { 
                // 滚动条高度 e.srcElement.scrollTop, e.target.scrollTop
                // 窗口可视区域高度 e.target.offsetHeight
                // 滚动高度 e.target.scrollHeight
                // console.log(
                // e.srcElement.scrollTop,
                // e.target.offsetHeight,
                // e.target.scrollHeight
                // )
                if (this.request_able) { 
                    if (this.comment.length == this.showComment.length) { 
                        console.log('加载完成！')
                        this.loading = false
                        this.request_able = false
                        return false
                    }
                    if (
                        e.target.scrollTop + e.target.offsetHeight >=
                        e.target.scrollHeight
                    ) { 
                        this.request_able = false
                        this.loading = true
                        setTimeout(() => { 
                            this.page++
                            this.showComment = this.comment.slice(0, 2 * this.page)
                        }, 1500)
                    }
    
                    this.request_able = true
                }
            },

<div id="app" @scroll="scrollFun($event)"></div>
    css代码：
    .最外部的盒子 { 
        position: fixed;
        top:0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS 监听滚动条事件

JS 监听滚动条事件获取滚动条位置代码监听滚动条方法效果 > 获取滚动条位置代码 / 获取滚动条位置 /

朱雀/ 2023年10月04日 18:37/ 0 赞/ 164 阅读

相关 vue监听滚动事件实现元素吸顶

添加滚动监听事件： mounted () \{ window.addEventListener('scroll', this.handleScroll) \},

偏执的太偏执、/ 2023年06月14日 04:27/ 0 赞/ 12 阅读

相关 vue事件监听

一、vue @事件.native和@事件.stop和@事件.self： 1、native原生点击事件：给vue组件绑定原生事件时候，必须加上native ，否则会认为监听的是

Dear 丶/ 2023年02月26日 04:28/ 0 赞/ 18 阅读

相关 vue的滚动监听事件

scrollGet(e) { // 滚动条高度 e.srcElement.scrollTop, e.target.scrollTop

ゝ一纸荒年。/ 2022年12月18日 10:51/ 0 赞/ 240 阅读

相关 Vue添加销毁监听滚动事件

`添加 window.addEventListener("scroll",this.adsorb) ` `销毁 window.removeEventListen

妖狐艹你老母/ 2022年11月29日 12:53/ 0 赞/ 331 阅读

相关监听滚动条事件

滚动条事件可以监听整个页面也可以监听某一div或者iframe，举例： //监听整个窗口的滚动条 window.onscroll = function()

迈不过友情╰/ 2022年06月07日 23:18/ 0 赞/ 636 阅读

相关 vue监听滚动事件实现元素吸顶-getBoundingClientRect()

需求顶部有banner，当屏幕向上滑动超出banner高度时出现导航思路监听scroll，通过判断当前元素与顶部的距离，来控制导航的显隐实现

亦凉/ 2022年05月15日 01:29/ 0 赞/ 646 阅读

相关页面滚动监听事件

滚动监听事件一般网页中的返回顶部按钮都是通过滚动监听事件来实现的这个例子是当滚动条下拉到一定程度之后，某个元素中的所有内容都变成fixed ![4444][]

红太狼/ 2022年02月01日 02:51/ 0 赞/ 514 阅读

相关 vue 监听滚轮滚动事件

<script> export default { name:"vue-scroll", data () {

亦凉/ 2021年12月10日 06:39/ 0 赞/ 699 阅读

相关 vue滚动事件监听

最近写了一个VUE的web app项目，需要实现某个部位吸顶的效果。即，页面往上滑动，刚好到达该部位时，该部分，固定在顶部显示。 1、监听滚动事件利用VUE写一个在控制台

逃离我推掉我的手/ 2021年09月17日 00:32/ 0 赞/ 521 阅读