原生js判断手机端页面滚动停止
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判断手机端页面滚动停止的更多相关文章
- 70.JS---利用原生js做手机端网页自适应解决方案rem布局
利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...
- js判断手机端操作系统(Andorid/IOS)
非常实用的js判断手机端操作系统(Andorid/IOS),并自动跳转相应下载界面 androidURL = "http://xxx/xxx.apk"; var browser = ...
- js判断手机端操作系统的两种方法
//判断手机端操作系统(Andorid/IOS),并自动跳转相应下载界面 androidURL ="http://xxx/xxx.apk"; var browser = { ver ...
- js判断手机端
if (window.location.toString().indexOf('pref=padindex') != -1) { } else { if (/AppleWebKit.*Mobile/i ...
- JS判断手机端是否安装某应用
方法一(网页上判断) if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { var loadDateTime = new Date() ...
- js判断手机端操作系统(Andorid/IOS),并自动为链接添加相应下载地址
<script type="text/javascript"> $(document).ready(function(e) { var u = navigator.us ...
- js判断手机端Android手机还是iPhone手机
/*判断当前设备是平板.安卓.苹果设备*/ <script type="text/javascript"> function fBrowserRedirect(){ v ...
- js判断手机端(Android手机还是iPhone手机)
/** * [isMobile 判断平台] * @param test: 0:iPhone 1:Android */ function ismobile(test){ var u = navigato ...
- 【转载】 原生js判断某个元素是否滚动到底部
document.querySelector('.content').addEventListener('scroll',function () { //读取内容区域的真实高度(滚动条高) // co ...
随机推荐
- mongoose-面向对象操作mongodb的Nodejs框架
介绍 无论是mysql还是mongodb,传统的与数据库交互的方式都是按照他们提供的API来写代码.它们提供的API往往不是很容易理解,而且难以记忆,如果传错了参数,写错一个符号都要查文档. ORM( ...
- Flutter 裁剪类组件 最全总结
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 ClipRect ClipRect组件使用矩形裁剪子组件, ...
- 什么是RPM
RPM是RedHat Package Manager(RedHat软件包管理工具)的缩写,这一文件格式名称虽然打上了RedHat的标志,但是其原始设计理念是开放式的,现在包括OpenLinux.S.u ...
- TCP断开连接(四次挥手)
四次挥手 ACK建立连接之后都为1. 1.A发送释放连接报文段,FIN=1. 2.B收到并回复确认,TCP进入半关闭状态,即此时B能向A发送,但是A无法向B发送数据. 3.当B传输完所有数据之后,发送 ...
- sklearn概述
Simple and efficient tools for predictive data analysis Accessible to everybody, and reusable in var ...
- 微服务系列之 Consul 注册中心
原文链接:https://mrhelloworld.com/posts/spring/spring-cloud/consul-service-registry/ Netflix Eureka 2.X ...
- MQTT抓包分析
1. 概述 MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(Publish/Subscribe)模式的轻量级通讯协议,该 ...
- Lambda表达式学习笔记
Lambda基础语法 Java8中引入了一个新的操作符" -> ",该操作符被称为箭头操作符或Lambda操作符,箭头操作符将Lambda表达式拆分成两部分: 左侧:Lamb ...
- python高阶函数&异常处理
高阶函数 1.什么是高阶函数 在Python中,变量可以指向函数 函数名也是变量 既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数. ma ...
- Asp.Net Core 中IdentityServer4 实战之 Claim详解
一.前言 由于疫情原因,让我开始了以博客的方式来学习和分享技术(持续分享的过程也是自己学习成长的过程),同时也让更多的初学者学习到相关知识,如果我的文章中有分析不到位的地方,还请大家多多指教:以后我会 ...