疯狂狐狸
疯狂狐狸
  • 发布:2016-08-31 10:40
  • 更新:2016-08-31 15:44
  • 阅读:11599

怎样监听scroll事件的滚动距离

分类:MUI
mui("#pullrefresh")[0].addEventListener("scrollstart", function() {  
            console.log(this.scrollHeight, this.getBoundingClientRect().top, this.scrollTop, document.body.scrollHeight);  
        });

可以监听到this.scrollHeight的值,但是很不灵敏,快速滑动时取值不准确,慢速滑动时有效

2016-08-31 10:40 负责人:无 分享
已邀请:

最佳回复

BoredApe

BoredApe - 有问题就会有答案。

var scroll = mui('.mui-scroll-wrapper').scroll();  
    document.querySelector('.mui-scroll-wrapper' ).addEventListener('scroll', function (e ) {  
      console.log(scroll.y);  
    })
疯狂狐狸

疯狂狐狸 (作者)

html结构
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron" id="list"></ul>
</div>
</div>

        document.querySelector('.mui-scroll-wrapper' ).addEventListener('scrollstart', function (e) {  
                console.log('scroll');  
            console.log(mui('.mui-scroll-wrapper').scroll().y);  
        });

为什么每次scrollstart事件都打印2次数据

[LOG] : scroll
[LOG] : -9039
[LOG] : scroll
[LOG] : -9039
[LOG] : scroll
[LOG] : -9932
[LOG] : scroll
[LOG] : -9932
[LOG] : scroll
[LOG] : -10697
[LOG] : scroll
[LOG] : -10697
[LOG] : scroll
[LOG] : -11768
[LOG] : scroll
[LOG] : -11768

疯狂狐狸

疯狂狐狸 (作者)

document.querySelector('.mui-scroll-wrapper' ).addEventListener('scrollstart', function (e) {  
        console.log(e.detail.y);  
});

该问题目前已经被锁定, 无法添加新回复