JS判断手机端页面滚动停止

tinyq 发布于2019-08-23 15:25 / 2664人阅读

摘要：的方法，可看下。网址上有非常详细的使用方法。事件是在用户开始滚动页面时触发开始滚动事件是在用户停止滚动页面时触发停止滚动

var topValue = 0,// 上次滚动条到顶部的距离  
        interval = null;// 定时器  
        contactsList = document.getElementById("contactsList");
    contactsList.onscroll = function() {  //我项目中的contactsList滚动
        
        if(interval == null) {// 未发起时，启动定时器，1秒1执行  
            interval = setInterval(function () {
                test();
            }, 1000);  
        }
        topValue = contactsList.scrollTop;  
        
    }  

    function test() {  
        //当滚动停止时，两个计算的距离会相同，此时再执行相关操作
        console.log(contactsList.scrollTop,topValue); 
        if(contactsList.scrollTop == topValue) { 
            console.log("ok");
            clearInterval(interval);  
            interval = null;  
        }  
    }

使用手机端滚动后，执行相关事件；onscroll是在元素滚动轴滚动时触发的。
jq mobile的方法，可看下http://www.runoob.com/jquerym...。
网址上有非常详细的使用方法。
scrollstart 事件是在用户开始滚动页面时触发：

$(document).on("scrollstart",function(){
alert("开始滚动!");
});

scrollstop 事件是在用户停止滚动页面时触发：

$(document).on("scrollstop",function(){
alert("停止滚动!");
});

云服务器 GPU云服务器 js判断鼠标滚动 aspnet判断手机端 asp判断是否手机端 asp语句判断手机端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102026.html

js移动端滑倒顶部加载历史消息解决方案!

摘要：使用具有回弹效果的滚动当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。最近做了一个语音直播聊天的项目，有一个功能是当没有直播时，进入房间可以查看历史消息，滑动到顶部加载之前的历史消息，我用jquery scroll事件，来判断是否滚动到顶部，问题来了：首先触发请求事件之后，prepend插入到当前列表之前，而prepen...

jackwang 2019-08-22 16:13 评论0 收藏0
js移动端滑倒顶部加载历史消息解决方案!

摘要：使用具有回弹效果的滚动当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。最近做了一个语音直播聊天的项目，有一个功能是当没有直播时，进入房间可以查看历史消息，滑动到顶部加载之前的历史消息，我用jquery scroll事件，来判断是否滚动到顶部，问题来了：首先触发请求事件之后，prepend插入到当前列表之前，而prepen...

mingde 2019-08-02 10:09 评论0 收藏0
js移动端滑倒顶部加载历史消息解决方案!

摘要：使用具有回弹效果的滚动当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。最近做了一个语音直播聊天的项目，有一个功能是当没有直播时，进入房间可以查看历史消息，滑动到顶部加载之前的历史消息，我用jquery scroll事件，来判断是否滚动到顶部，问题来了：首先触发请求事件之后，prepend插入到当前列表之前，而prepen...

leejan97 2019-08-30 15:53 评论0 收藏0
H5项目常见问题汇总及解决方案

摘要：解决方案可以解决在手机上点击事件的延迟的模块，事件也是为了解决在的延迟问题显示屏原理及设计方案说明屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由个变为多个，如在同样带下的屏幕上，苹果设备的显示屏中，像素点个变为个。原文链接 - https://github.com/FrontEndRo... H5项目常见问题及注意事项 Meta基础知识： H5页面窗口自动调整到设备...

marser 2019-08-20 14:08 评论0 收藏0