快捷導(dǎo)航

移動端jQuery修正Web頁面滑動時div問題的兩則實例

更新時間：2016年05月30日 17:12:15 作者：Aaron

這篇文章主要介紹了移動端jQuery修正Web頁面滑動時div問題的兩則實例,分別針對頂部固定fixed不為0時滑動出現(xiàn)的閃動以及touchmove的受阻止的相關(guān)問題,需要的朋友可以參考下

頂部固定時劃屏出現(xiàn)閃動
頭部是一個普通的div，高度是48,頭部下面有個固定的banner，手下滑的時候，banner會固定在瀏覽器最頂部不動。出現(xiàn)的問題是，PC端是好的，手機瀏覽器向上滑動的時候出現(xiàn)閃動！影響用戶體驗。
解決方法一：
之前的做法：

 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);
   }
 });

這樣做手機網(wǎng)站中會出現(xiàn)明顯的閃動效果！
改進之后的做法：

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"); 
   }
});

這樣做滑動的時候，有個向上的動畫效果，不會出現(xiàn)閃動！
解決方法二：
思路：頂部固定的地方，一開始和上面不固定的地方是一體的，不寫position:fixed，當要固定的div的offset比scrolltop小的時候，讓其固定。（我之前之所以沒有用這個方法，是因為整個頁面在ios中要引用，當在ios中的時候，頭部不出現(xiàn)。）
代碼如下：

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滑動、導(dǎo)致底層body滑動
body很長，可以滑動，body頭部有一個模擬下拉的選擇框。下拉選擇有滾動軸，如下圖。

2016530170643217.png (324×557)

我給body一個overflow：hidden和高度是沒有用的。手機網(wǎng)站上背景還是可以滑動，然后我給body一個touchmove的preventdefault()阻止事件，body滑動阻止了，PC上面是可以了，但是手機上面滑動div還是會導(dǎo)致底部body的滑動，我給div 一個阻止冒泡的事件stopPropagation()，手機網(wǎng)站上面還是不可以。
關(guān)于preventdefault和stopPropagation，后面有時間會講解其區(qū)別。
解決方案:
我經(jīng)過反復(fù)測試，發(fā)現(xiàn)滾動軸滾到底部的時候，會觸發(fā)body的滑動，那么我就在事件滾到底部的時候?qū)Ρ韺拥膁iv做一個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");
     }
    })
   }
  });

您可能感興趣的文章: