元素滚动到底部或顶部时阻止body滚动
移动端的弹窗内容有滚动条,滚动到底部或顶部时或影响弹窗下的body滚动,某些浏览器滚动到顶部时不松手就触发了刷新页面的情况,如果不需要这样的默认体验,就需要加一下判断了。
var startX,startY,endX,endY,distanceX,distanceY;//判断容器的滑动方向
//判断元素滑到底部时阻止滑动body,使用时传入局部滚动的选择器即可
function smartScroll(ele){
$(ele).on("touchstart", function (e) {
startX = e.originalEvent.changedTouches[].pageX;
startY = e.originalEvent.changedTouches[].pageY;
}); $(ele).on("touchmove", function (e) {
//获取滑动屏幕时的X,Y
endX = e.originalEvent.changedTouches[].pageX;
endY = e.originalEvent.changedTouches[].pageY;
//获取滑动距离
distanceX = endX - startX;
distanceY = endY - startY;
var scrollHeight = this.scrollHeight;
var height = this.offsetHeight;
var scrollTop = this.scrollTop; //判断滑动方向
if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX > ) {
//layer.msg('往右滑动');
} else if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX < ) {
//layer.msg('往左滑动');
} else
if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY < ) {
//layer.msg('往上滑动');
if(scrollHeight - height == scrollTop){
//layer.msg("bottom")
event.preventDefault();
return;
}else{
e.stopPropagation();
}
} else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY > ) {
//layer.msg('往下滑动');
if(this.scrollTop == ){
//layer.msg("top")
event.preventDefault();
return;
}else{
e.stopPropagation();
}
}
})
}
另外有种情况就是layer这样的弹出层占100%高度的,当layer滚动到底部时会影响下面的body滚动,需要在layer弹框时记住之前body的滚动位置,关闭layer弹窗时再恢复原来的高度
var scrollTop = ;
function disabledBakePage(arg){
$("#top_header2 a.back_a").addClass("prevent-none");
if(arg){
scrollTop = ;
}else{
scrollTop = getScrollTop();//记住当前的位置
}
$("body").addClass("no-scroll");
$(window).scrollTop();//解决浏览器地址栏遮住绝对定位或固定定位弹窗顶部的问题
$("#patient_list_wrap").addClass("opacity-0"); }
function abledBakePage(){
$("body").removeClass("no-scroll");
$(window).scrollTop(scrollTop);//恢复原来的位置
$("#patient_list_wrap").removeClass("opacity-0")
setTimeout(function(){
$("#top_header2 a.back_a").removeClass("prevent-none")
},) }
function getScrollTop(){
var scrollTop = window.pageYOffset
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| ;
return scrollTop;
} //*********以下是获取键盘弹起时窗口的高度,可以供参考***********
// 通过键盘弹起事件获取
$("document").on('keyup', function (e) {
layer.msg(e.height)
})
// 键盘收起事件
$("document").on('keydown', function (e) {
layer.msg(e.height) //
})
function showHeight(){
var bodyClientHeight = document.body.clientHeight //==> BODY对象高度
var documentElementClientHeight = document.documentElement.clientHeight //==> 可见区域高度
var bodyClientHeight = document.body.clientHeight //==> 网页可见区域高
var offsetHeight = document.body.offsetHeight //==> 网页可见区域高(包括边线的高)
var bodyScrollHeight = document.body.scrollHeight //==> 网页正文全文高
var bodyScrollTop = document.body.scrollTop //==> 网页被卷去的高
var screenTop = window.screenTop //==> 网页正文部分上
var screenHeight = window.screen.height //==> 屏幕分辨率的高
var screenAvailHeight = window.screen.availHeight //==> 屏幕可用工作区高度
var info = '<p>bodyClientHeight: '+bodyClientHeight+'</p><p>documentElementClientHeight: '+documentElementClientHeight+'</p><p>bodyClientHeight: '+bodyClientHeight+'</p><p>offsetHeight: '+offsetHeight+'</p><p>bodyScrollHeight: '+bodyScrollHeight+'</p><p>bodyScrollTop: '+bodyScrollTop+'</p><p>screenTop: '+screenTop+'</p><p>screenHeight: '+screenHeight+'</p><p>screenAvailHeight: '+screenAvailHeight+'</p>';
layer.msg(info, {
icon: ,
time: //2秒关闭(如果不配置,默认是3秒)
}, function(){
//do something
});
}
元素滚动到底部或顶部时阻止body滚动的更多相关文章
- 利用自定义动画 animate() 方法,实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠标移开时,继续滚动
查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...
- android ListView滚动条监听判断滚动到底部还是顶部
代码: lv.setOnScrollListener(new OnScrollListener() { public void onScrollStateChanged(AbsListView vie ...
- Android 控制ScrollView滚动到底部或顶部
在开发中,我们经常需要更新列表,并将列表拉倒最底部,比如发表微博,聊天界面等等, 这里有两种办法,第一种,使用scrollTo(): public static void scrollToBottom ...
- Android为TV端助力 电影栏目移动到底部或者顶部时抖动动画
1 移动到底部上下抖动ObjectAnimator animatorX = ObjectAnimator.ofFloat(holder.itemView,"translationX" ...
- ListView数据更新后,自动滚动到底部(聊天时常用)| Listview Scroll to the end of the list after updating the list
转:http://www.cnblogs.com/bjshsqlt/p/3311830.html If you would like to after you have updated by list ...
- 滑动到底部或顶部响应的ScrollView实现
关于使用可见:滚动到底部或顶部响应的ScrollView使用 示例APK可从这些地址下载:Google Play, 360手机助手, 百度手机助手, 小米应用商店, 豌豆荚 两种实现方式的主要 ...
- web自动化,下拉滚动到底部/顶部和下拉滚动到指定的元素
在web自动化,经常会遇到页面显示内容太多的时候,页面就会出现滚动条,一般有两种方式进行下拉,一种是直接下拉到底部/顶部/中部,或者直接给定元素,直接下拉到指定元素的位置. 两种方式的共同点: 两种方 ...
- 记一次包含iframe的需要滚动的元素不能滚动到底部的问题
一个包含上头部.下部模块(包含左右两边模块:侧边栏.内容区域)的页面 前提条件,内容区域: 1.元素高度需要自适应屏幕高度 2.里面内容足够长时,可以滚动 3.包含了一个iframe嵌入的内容很长的页 ...
- 滚动页面时DIV到达顶部时固定在顶部
本示例使用Javascript实现了滚动页面时,DIV到达顶部时固定在顶部.在IE下效果有点闪,效果网址:http://www.keleyi.com/keleyi/phtml/fixdiv.htm 下 ...
随机推荐
- [WebRTC/JsSIP] AUDIO RTP REPORTS ERROR: [Remote Address Error!]
问题描述: 在使用FreeSWITCH WebRTC 测试时,FS回复 502 Bad Gateway.查看FS日志 [DEBUG] switch_core_media.c:5147 AUDIO R ...
- Linux内存使用调整
前段时间在做播放器的时候,遇到个问题,花了很长时间,做个记录,希望对有需要的人有所帮助: 播放器的播视频的时候,无论是手动切换视频还是到视频播放完成,自动切换视频,一定次数后均出现黑屏现象,偶尔有声音 ...
- Linux虚拟串口
将下列Python代码保存成VitrualCom.py: Code#! /usr/bin/env python #coding=utf-8 import pty import os import se ...
- SSH localhost免密不成功 + 集群状态显示Configured Capacity: 0 (0 KB)
前一天运行hadoop一切安好,今天重新运行出现BUG.下面对遇到的bug.产生原因以及解决方法进行一下简单总结记录. [bug1]用ssh localhost免密登录时提示要输入密码. 原因分析:之 ...
- PHP--php时间差8个小时的问题
自PHP5.0开始,用PHP获取系统时间时,时间比当前时间少8个小时.原因是PHP.ini中没有设置timezone时,PHP是使用的UTC时间,所以在中国时间要少8小时. 解决办法: 1.在PHP. ...
- GoLand使用
# 不定期更新 什么是GoLand GoLand是JetBrains出品的一个Go语言IDE,JB的IDE有多好用我想很多程序员都知道,个人感觉唯一的缺点就是比较大(因为功能多) 希望大家多多支持正版 ...
- 如何用Axure快速制作APP交互原型
对于产品经理来说,熟练使用一些常用软件是一项十分必要的技能.其中,作为一个专业的快速原型设计工具,Axure RP无疑在产品人心中拥有一个难以撼动的地位.但就要PS一样,虽然足够专业,但同样也会存在使 ...
- PHP 转义
函数名 释义 介绍 htmlspecialchars 将与.单双引号.大于和小于号化成HTML格式 &转成&"转成"' 转成'<转成<>转成> ...
- winform里面打开网页(转)
首先,新建一个winform项目,我在想,如果想要实现打开网页功能的话,应该会有一个控件什么之类的吧?查了工具栏,真的有一个名叫 WebBrowser的家伙,应该就是这货没错了.在网上查了它的资料更加 ...
- MongoDB的简单操作
一.简介 二.MongoDB基础知识 三.安装 四.基本数据类型 五.增删改查操作 六.可视化工具 七.pymongo 一.简介 MongoDB是一款强大.灵活.且易于扩展的通用型数据库 MongoD ...