20

大家好,小弟是刚接触vue的小菜鸟,在使用过程中发现一个问题,就是在一个组件上监听scroll事件无效,有滚动操作也没有触发。
监听scroll事件尝试使用了v-on和window addEventListener方法,都不行(同样方法监听touchmove就可以成功),使用方法如下:
通过v-on操作

<template>
<div class="table-container" @scroll=handleScroll>
    <div class="headcol">
        <table>
            <thead>
                <tr >
                    <td v-for="c in list.header">
                        {{c}}
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr  v-for="r in list.rows">
                    <td v-for="c in r">
                        {{c}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</template>

通过eventlistener操作:

        created() {
            window.addEventListener('scroll', this.handleScroll);
        },

还有一个问题,就是同样在这个组件里注册的touchmove事件handler里读取到的scrollTop一直为0。
另外,就是offsetHeight用document.documentElement.offsetHeight和document.body.offsetHeight一直都获取不到。不知道是什么原因。

通过touchmove事件获取scroTop等相关数值的操作:

            handleTouchMove(e) {
                let scrollTop = document.body.scrollTop;
                let clientHeight = document.body.clientHeight;

                console.log("shoplist scrollTop %d, clientHeight %d“, 
                            scrollTop, clientHeight);
            },

以上两个问题查找了很多文章都没有什么帮助,所以还请大家多指教。感谢感谢。

2017-04-19 提问

查看全部 15 个回答

37

给后面的人多一个解决方案,第三个参数加上true,能成功监听。window.addEventListener('scroll', this.handleScroll, true);

1

一直是0

shability · 2018年06月10日

1

专门登录来顶一下这个答案,解决一个困扰我好久的问题,真是太坑了,到现在我都不知道为啥父元素添加overflow:auto后就会无法监听scroll事件,用这个方法终于可以两者共存了

hellolex · 2018年05月25日

展开评论

推广链接