移动端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参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
js实现tab切换效果
Feb 16 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
webpack proxy 使用(代理的使用)
Jan 10 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中使用临时表查询数据的一个例子
2013/02/03 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
Js 本页面传值实现代码
2009/05/17 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
Python pymsql模块的使用
2020/09/07 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
保洁主管岗位职责
2013/11/20 职场文书
服装公司总经理岗位职责
2013/11/30 职场文书
历史教育专业个人求职信
2013/12/13 职场文书
个人党性剖析材料
2014/02/03 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
信用卡工作证明范本
2015/06/19 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python