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/jquerymobile/jquerymobile-events-scroll.html。

网址上有非常详细的使用方法。

scrollstart 事件是在用户开始滚动页面时触发:

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

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

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

原生js判断手机端页面滚动停止的更多相关文章

  1. 70.JS---利用原生js做手机端网页自适应解决方案rem布局

    利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...

  2. js判断手机端操作系统(Andorid/IOS)

    非常实用的js判断手机端操作系统(Andorid/IOS),并自动跳转相应下载界面 androidURL = "http://xxx/xxx.apk"; var browser = ...

  3. js判断手机端操作系统的两种方法

    //判断手机端操作系统(Andorid/IOS),并自动跳转相应下载界面 androidURL ="http://xxx/xxx.apk"; var browser = { ver ...

  4. js判断手机端

    if (window.location.toString().indexOf('pref=padindex') != -1) { } else { if (/AppleWebKit.*Mobile/i ...

  5. JS判断手机端是否安装某应用

    方法一(网页上判断) if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {   var loadDateTime = new Date() ...

  6. js判断手机端操作系统(Andorid/IOS),并自动为链接添加相应下载地址

    <script type="text/javascript"> $(document).ready(function(e) { var u = navigator.us ...

  7. js判断手机端Android手机还是iPhone手机

    /*判断当前设备是平板.安卓.苹果设备*/ <script type="text/javascript"> function fBrowserRedirect(){ v ...

  8. js判断手机端(Android手机还是iPhone手机)

    /** * [isMobile 判断平台] * @param test: 0:iPhone 1:Android */ function ismobile(test){ var u = navigato ...

  9. 【转载】 原生js判断某个元素是否滚动到底部

    document.querySelector('.content').addEventListener('scroll',function () { //读取内容区域的真实高度(滚动条高) // co ...

随机推荐

  1. 前端每日实战:34# 视频演示如何用纯 CSS 创作在文本前后穿梭的边框

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qYepNv 可交互视频教程 此视频 ...

  2. 3,Java中的文件IO流

    1,File类 ··· 概念:File对象可以表示一个文件或目录.可以对其进行增删改查. ··· 常用方法:     File f = new File(".");     判断是 ...

  3. MyBatis-Plus不写任何resultMap和SQL执行一对一、一对多、多对多关联查询

    对于一对一,一对多的关联查询,Mybatis-Plus官方示例(mybatis-plus-sample-resultmap)在处理时,需要编写查询方法及配置resultMap,并且写SQL. 为了简化 ...

  4. windows上用putty从linux上下载文件

    我之前使用putty都是直接从网上下的putty.exe,其实如果想下载windows的mis二进制文件,系统安装的话会包含,pscp.psftp.puttygen等一系列的文件. 今天下从服务器上, ...

  5. ggplot2(2) 从qplot开始入门

    2.1 简介 qplot的意思是快速作图(quick plot). qplot是一种快捷方式,如果您已习惯于使用基础plot(),则可以使用它.它可以使用一致的调用模式快速创建许多不同类型的图. qp ...

  6. Markdown试用

    目录 今天又是充满希望的一天 一.是什么 二.为什么 三.怎么做 代码 这世界上好人坏人都很多,我不是一个坏人. 我不是个英雄,我只是个拿

  7. (转)协议森林14 逆袭 (CIDR与NAT)

    协议森林14 逆袭 (CIDR与NAT) 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! IPv4由于最初的设计原因,长度只有32 ...

  8. C# RSACryptoServiceProvider 加密解密 RSA 加密解密

    什么是RSA:RSA公开密钥密码体制.所谓的公开密钥密码体制就是使用不同的加密密钥与解密密钥,是一种“由已知加密密钥 推导出 解密密钥在计算上是不可行的”密码体制. 下附代码,在控制台中粘贴在启动类即 ...

  9. No compiler is provided in this environment报错解决方案

  10. WSGI标准、MVC和MTC框架

    WSGI服务: wsgiref模块其实就是将整个请求信息给封装了起来,就不需要你自己处理了,假如它将所有请求信息封装成了一个叫做request的对象,那么你直接request.path就能获取到用户这 ...