移动端jQuery修正Web页面滑动时div问题的两则实例


Posted in Javascript onMay 30, 2016

顶部固定时划屏出现闪动
头部是一个普通的div,高度是48,头部下面有个固定的banner,手下滑的时候,banner会固定在浏览器最顶部不动。出现的问题是,PC端是好的,手机浏览器向上滑动的时候出现闪动!影响用户体验。
解决方法一:
之前的做法:

if ($(window).scrollTop() < 48) {
    $(".nav ").css("top", 48 - parseInt($(window).scrollTop()));
   }else{
    $(".nav ").css("top", "0"); 
   }
  $(window).scroll(function () {
   $(".nav ").css("top", "0");
   var toplength = parseInt($(window).scrollTop());
   if ($(window).scrollTop() < 48) {
    $(".nav ").css("top", 48 - toplength);
   }
 });

这样做手机网站中会出现明显的闪动效果!
改进之后的做法:

if ($(window).scrollTop() < 48) {
   $(".nav ").stop().animate({"top":48 - parseInt($(window).scrollTop())},"fast");
  } else {
   $(".nav ").stop().animate({"top": "0"},"fast");
  }
$(window).scroll(function () {
   var toplength = parseInt($(window).scrollTop());
   if ($(window).scrollTop() < 48) {
    $(".nav ").stop().animate({"top": 48 - toplength},"fast");
   }else{
   $(".nav ").stop().animate({"top": "0"},"fast"); 
   }
});

这样做滑动的时候,有个向上的动画效果,不会出现闪动!
解决方法二:
思路:顶部固定的地方,一开始和上面不固定的地方是一体的,不写position:fixed,当要固定的div的offset比scrolltop小的时候,让其固定。(我之前之所以没有用这个方法,是因为整个页面在ios中要引用,当在ios中的时候,头部不出现。)
代码如下:

menuPosition: function() {
   var m = $(window).scrollTop(), 
   n = $("#idmenuinfo的父亲").offset().top,
   l = $("#menuinfo");
   if (m >= n) {
    if (!l.hasClass("menuinfo")) {
     l.addClass("menuinfo")
    }
   } else {
    l.removeClass("menuinfo")
   }
  }

menuinfo的样式如下:

.menuinfo {
 position: fixed!important;
 width: 100%;
 left: 0;
 top: 0;
}

表层div滑动、导致底层body滑动
body很长,可以滑动,body头部有一个模拟下拉的选择框。下拉选择有滚动轴,如下图。

移动端jQuery修正Web页面滑动时div问题的两则实例

我给body一个overflow:hidden和高度是没有用的。手机网站上背景还是可以滑动,然后我给body一个touchmove的preventdefault()阻止事件,body滑动阻止了,PC上面是可以了,但是手机上面滑动div还是会导致底部body的滑动,我给div 一个阻止冒泡的事件stopPropagation(),手机网站上面还是不可以。
关于preventdefault和stopPropagation,后面有时间会讲解其区别。
解决方案:
我经过反复测试,发现滚动轴滚到底部的时候,会触发body的滑动,那么我就在事件滚到底部的时候对表层的div做一个touchmove的阻止。到达滚动轴底部,向下滑动,阻止事件,向上滑动,开启事件。为此就要判断touchmove的方向了。

$("body").on("touchstart", function(e) {
 e.preventDefault();
 startX = e.originalEvent.changedTouches[0].pageX,
 startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchmove", function(e) {
 e.preventDefault();
 moveEndX = e.originalEvent.changedTouches[0].pageX,
 moveEndY = e.originalEvent.changedTouches[0].pageY,
 X = moveEndX - startX,
 Y = moveEndY - startY;

 if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
  alert("left 2 right");
 }
 else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
  alert("right 2 left");
 }
 else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
  alert("top 2 bottom");
 }
 else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
  alert("bottom 2 top");
 }
 else{
  alert("just touch");
 }
});

上面的方法是判断touchmove的滑动方向。

  

$('#haorooms底层背景').bind("touchmove", function (e) {
   e.preventDefault();
  });
  $(".滚动的父亲").bind("touchstart", function (events) {
   startY = events.originalEvent.changedTouches[0].pageY;
  });
  $(".滚动的父亲 ul").bind("touchmove", function (e) {
   var ulheight = $(this).height();
   var scrollTop = $(this).scrollTop();
   var scrollheight = $(this)[0].scrollHeight;
   if (ulheight + scrollTop + 20 >= scrollheight) { //滚到底部20px左右
    $(".滚动的父亲").bind("touchmove", function (event) {
     moveEndY = event.originalEvent.changedTouches[0].pageY,
       theY = moveEndY - startY;
     if (theY > 0) { //用上面的abs()更加准确!
      $(".滚动的父亲").unbind("touchmove");
     }
     if (theY < 0) {
      event.preventDefault();
     }
    })
   }
   if (scrollTop < 20) {//滚到顶部20px左右
    $(".滚动的父亲").bind("touchmove", function (event) {
     moveEndY = event.originalEvent.changedTouches[0].pageY,
       theY = moveEndY - startY;
     if (theY > 0) {
      event.preventDefault();
     }
     if (theY < 0) {
      $(".滚动的父亲").unbind("touchmove");
     }
    })
   }
  });
Javascript 相关文章推荐
用JavaScript调用WebService的示例
Apr 07 Javascript
基于jquery的商品展示放大镜
Aug 07 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 #Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 #Javascript
JS检测移动端横竖屏的代码
May 30 #Javascript
BootStrap中Tab页签切换实例代码
May 30 #Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 #Javascript
拥Bootstrap入怀——导航栏篇
May 30 #Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 #Javascript
You might like
木翼下载系统中说明的PHP安全配置方法
2007/06/16 PHP
php GD绘制24小时柱状图
2008/06/28 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
JQuery toggle使用分析
2009/11/16 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
python 中的int()函数怎么用
2017/10/17 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
简单英文演讲稿
2014/01/01 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
实习感想范文
2015/08/10 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python