《移动端jQuery修正Web页面滑动时div问题的两则实例_.docx》由会员分享，可在线阅读，更多相关《移动端jQuery修正Web页面滑动时div问题的两则实例_.docx（8页珍藏版）》请在三一文库上搜索。
1、移动端jQuery修正Web页面滑动时div问题的两则实例_ 这篇文章主要介绍了移动端jQuery修正Web页面滑动时div问题的两则实例,分别针对顶部固定fixed不为0时滑动消失的闪动以及touchmove的受阻挡的相关问题,需要的伴侣可以参考下 顶部固定时划屏消失闪动 头部是一个一般的div，高度是48,头部下面有个固定的banner，手下滑的时候，banner会固定在扫瞄器最顶部不动。消失的问题是，PC端是好的，手机扫瞄器向上滑动的时候消失闪动！影响用户体验。 解决方法一： 之前的做法： if ($(window).scrollTop() 48) $(.nav ).css(top, 4
2、8 - 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 ).st
3、op().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,fas
4、t); ); 这样做滑动的时候，有个向上的动画效果，不会消失闪动！ 解决方法二： 思路：顶部固定的地方，一开头和上面不固定的地方是一体的，不写position:fixed，当要固定的div的offset比scrolltop小的时候，让其固定。（我之前之所以没有用这个方法，是由于整个页面在ios中要引用，当在ios中的时候，头部不消失。） 代码如下: menuPosition: function() var m = $(window).scrollTop(), n = $(#idmenuinfo的父亲).offset().top, l = $(#menuinfo); if (m = n) if
5、(!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头部有一个模拟下拉的选择框。下拉选择有滚动轴，如下图。 我给body一个overflow：hidden和高度是没有用的。手机网站上背景还是可以滑动，然后我给body一个touchmove的preventdefault()
6、阻挡大事，body滑动阻挡了，PC上面是可以了，但是手机上面滑动div还是会导致底部body的滑动，我给div 一个阻挡冒泡的大事stopPropagation()，手机网站上面还是不行以。 关于preventdefault和stopPropagation，后面有时间会讲解其区分。 解决方案: 我经过反复测试，发觉滚动轴滚究竟部的时候，会触发body的滑动，那么我就在大事滚究竟部的时候对表层的div做一个touchmove的阻挡。到达滚动轴底部，向下滑动，阻挡大事，向上滑动，开启大事。为此就要推断touchmove的方向了。 $(body).on(touchstart, function(e)
7、 e.preventDefault(); startX = e.originalEvent.changedTouches0.pageX, startY = e.originalEvent.changedTouches0.pageY; ); $(body).on(touchmove, function(e) e.preventDefault(); moveEndX = e.originalEvent.changedTouches0.pageX, moveEndY = e.originalEvent.changedTouches0.pageY, X = moveEndX - startX, Y =
8、 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); ); 上面的方法是推断touchmo
9、ve的滑动方向。 $(#haorooms底层背景).bind(touchmove, function (e) e.preventDefault(); ); $(.滚动的父亲).bind(touchstart, function (events) startY = events.originalEvent.changedTouches0.pageY; ); $(.滚动的父亲 ul).bind(touchmove, function (e) var ulheight = $(this).height(); var scrollTop = $(this).scrollTop(); var scrol
10、lheight = $(this)0.scrollHeight; if (ulheight + scrollTop + 20 = scrollheight) /滚究竟部20px左右 $(.滚动的父亲).bind(touchmove, function (event) moveEndY = event.originalEvent.changedTouches0.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.changedTouches0.pageY, theY = moveEndY - startY; if (theY 0) event.preventDefault(); if (theY 0) $(.滚动的父亲).unbind(touchmove); ) ); .