這篇文章主要介紹了移動(dòng)端jQuery修正Web頁(yè)面滑動(dòng)時(shí)div問(wèn)題的兩則實(shí)例,分別針對(duì)頂部固定fixed不為0時(shí)滑動(dòng)出現(xiàn)的閃動(dòng)以及touchmove的受阻止的相關(guān)問(wèn)題,需要的朋友可以參考下
頂部固定時(shí)劃屏出現(xiàn)閃動(dòng)
頭部是一個(gè)普通的div，高度是48,頭部下面有個(gè)固定的banner，手下滑的時(shí)候，banner會(huì)固定在瀏覽器最頂部不動(dòng)。出現(xiàn)的問(wèn)題是，PC端是好的，手機(jī)瀏覽器向上滑動(dòng)的時(shí)候出現(xiàn)閃動(dòng)！影響用戶體驗(yà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);
}
});
這樣做手機(jī)網(wǎng)站中會(huì)出現(xiàn)明顯的閃動(dòng)效果！
改進(jì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");
}
});
這樣做滑動(dòng)的時(shí)候，有個(gè)向上的動(dòng)畫效果，不會(huì)出現(xiàn)閃動(dòng)！
解決方法二：
思路：頂部固定的地方，一開始和上面不固定的地方是一體的，不寫position:fixed，當(dāng)要固定的div的offset比scrolltop小的時(shí)候，讓其固定。（我之前之所以沒(méi)有用這個(gè)方法，是因?yàn)檎麄€(gè)頁(yè)面在ios中要引用，當(dāng)在ios中的時(shí)候，頭部不出現(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òng)、導(dǎo)致底層body滑動(dòng)
body很長(zhǎng)，可以滑動(dòng)，body頭部有一個(gè)模擬下拉的選擇框。下拉選擇有滾動(dòng)軸，如下圖。
我給body一個(gè)overflow：hidden和高度是沒(méi)有用的。手機(jī)網(wǎng)站上背景還是可以滑動(dòng)，然后我給body一個(gè)touchmove的preventdefault()阻止事件，body滑動(dòng)阻止了，PC上面是可以了，但是手機(jī)上面滑動(dòng)div還是會(huì)導(dǎo)致底部body的滑動(dòng)，我給div 一個(gè)阻止冒泡的事件stopPropagation()，手機(jī)網(wǎng)站上面還是不可以。
關(guān)于preventdefault和stopPropagation，后面有時(shí)間會(huì)講解其區(qū)別。
解決方案:
我經(jīng)過(guò)反復(fù)測(cè)試，發(fā)現(xiàn)滾動(dòng)軸滾到底部的時(shí)候，會(huì)觸發(fā)body的滑動(dòng)，那么我就在事件滾到底部的時(shí)候?qū)Ρ韺拥膁iv做一個(gè)touchmove的阻止。到達(dá)滾動(dòng)軸底部，向下滑動(dòng)，阻止事件，向上滑動(dòng)，開啟事件。為此就要判斷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的滑動(dòng)方向。
$('#haorooms底層背景').bind("touchmove", function (e) {
e.preventDefault();
});
$(".滾動(dòng)的父親").bind("touchstart", function (events) {
startY = events.originalEvent.changedTouches[0].pageY;
});
$(".滾動(dòng)的父親 ul").bind("touchmove", function (e) {
var ulheight = $(this).height();
var scrollTop = $(this).scrollTop();
var scrollheight = $(this)[0].scrollHeight;
if (ulheight + scrollTop + 20 >= scrollheight) { //滾到底部20px左右
$(".滾動(dòng)的父親").bind("touchmove", function (event) {
moveEndY = event.originalEvent.changedTouches[0].pageY,
theY = moveEndY - startY;
if (theY > 0) { //用上面的abs()更加準(zhǔn)確！
$(".滾動(dòng)的父親").unbind("touchmove");
}
if (theY < 0) {
event.preventDefault();
}
})
}
if (scrollTop < 20) {//滾到頂部20px左右
$(".滾動(dòng)的父親").bind("touchmove", function (event) {
moveEndY = event.originalEvent.changedTouches[0].pageY,
theY = moveEndY - startY;
if (theY > 0) {
event.preventDefault();
}
if (theY < 0) {
$(".滾動(dòng)的父親").unbind("touchmove");
}
})
}
});