移动端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 相关文章推荐
基于jQuery架构javascript基础体系
Jan 01 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
详解webpack性能优化——DLL
Oct 20 Javascript
JS异步函数队列功能实例分析
Nov 28 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
vue 实现element-ui中的加载中状态
Nov 11 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开发规范手册之PHP代码规范详解
2011/01/13 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
Python简单过滤字母和数字的方法小结
2019/01/09 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
应届生法律顾问求职信
2013/11/19 职场文书
销售行政专员职责
2014/01/03 职场文书
购房意向书
2014/04/01 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
优秀党支部申报材料
2014/12/24 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python