頂部固定時劃屏出現閃動
頭部是一個普通的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頭部有一個模擬下拉的選擇框。下拉選擇有滾動軸，如下圖。
我給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"); } }) } });新聞熱點
疑難解答
