移动端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 相关文章推荐
js 分栏效果实现代码
Aug 29 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
浅谈Vue.js
Mar 02 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 Javascript
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 array_multisort()函数的使用札记
2011/07/03 PHP
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
高一学生期末评语
2014/04/25 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
出纳工作检讨书
2014/10/18 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers