滑動表層div時阻止底層div滑動

我給body乙個overflow：hidden和高度是沒有用的。手機**上背景還是可以滑動，然後我給body乙個touchmove的preventdefault()阻止事件，body滑動阻止了，pc上面是可以了，但是手機上面滑動div還是會導致底部body的滑動，我給div 乙個阻止冒泡的事件stoppropagation()，手機**上面還是不可以。

關於preventdefault和stoppropagation，後面有時間會講解其區別。

我經過反覆測試，發現滾動軸滾到底部的時候，會觸發body的滑動，那麼我就在事件滾到底部的時候對表層的div做乙個touchmove的阻止。到達滾動軸底部，向下滑動，阻止事件，向上滑動，開啟事件。為此就要判斷touchmove的方向了。

var startx ,starty;
$("body").on("touchstart", function
(e) );
$("body").on("touchmove", function
(e) 
else
if ( math.abs(x) > math.abs(y) && x < 0 ) 
else
if ( math.abs(y) > math.abs(x) && y > 0) 
else
if ( math.abs(y) > math.abs(x) && y < 0 ) 
else
});

上面的方法是判斷touchmove的滑動方向。

除了上面方法判斷手機端手機滑動方向，我這裡再介紹乙個方案，就是封裝乙個角度函式，通過角度函式來判斷也還不錯！我這裡僅僅把這種方式實現上滑下滑左滑右滑列舉一下！

var startx, starty;

//獲得角度

function getangle(angx, angy) ;

//根據起點終點返回方向 1向上 2向下 3向左 4向右 0未滑動
function
getdirection
(startx, starty, endx, endy) 
var angle = getangle(angx, angy);
if (angle >= -135 && angle <= -45) else
if (angle > 45 && angle < 135) else
if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) else
if (angle >= -45 && angle <= 45) 
return result;
}//手指接觸螢幕
document.addeventlistener("touchstart", function
(e) , false);
//手指離開螢幕
document.addeventlistener("touchend", function
(e) 
}, false);

知道滑動方向如何判斷，那麼解決這個問題我們可以判斷是否滑動到底部或者頂部，假如滑動到底部，再往下滑動，就阻止滑動，往上滑動，就開啟滑動！滑動到頂部乙個道理！總結**如下：

$('#haorooms底層背景').bind("touchmove", function
(e) );
$(".滾動的父親").bind("touchstart", function
(events) );
$(".滾動的父親 ul").bind("touchmove", function
(e) 
if (math.abs(they) > math.abs(thex) && they < 0) })}
if (scrolltop < 20) 
if (math.abs(they) > math.abs(thex) && they < 0) })}
});

以上方法基本上能夠阻止body的滾動，但是，有時候還是會有問題，期待更好的解決方案！

** 下面是張鑫旭的乙個解決辦法，這裡我簡單的借用一下！

css**：

.noscroll, .noscroll body .noscroll body

js**：

$.smartscroll = function
(container, selectorscrollable) 
// 是否是搓瀏覽器
// 自己在這裡新增判斷和篩選
var issbbrowser;
var data = ;
// 事件處理
container.on(
var elscroll;
// 獲取標記的滾動元素，自身或子元素皆可
if (eltarget.is(selectorscrollable)) else
if ((elscroll = eltarget.parents(selectorscrollable)).length == 0) 
if (!elscroll) 
// 當前滾動元素標記
data.elscroll = elscroll;
// 垂直位置標記
data.posy = events.pagey;
data.scrolly = elscroll.scrolltop();
// 是否可以滾動
data.maxscroll = elscroll[0].scrollheight - elscroll[0].clientheight;
},touchmove: function
() // 滾動元素
var elscroll = data.elscroll;
// 當前的滾動高度
var scrolltop = elscroll.scrolltop();
// 現在移動的垂直位置，用來判斷是往上移動還是往下
var events = event.touches[0] || event;
// 移動距離
var distancey = events.pagey - data.posy;
if (issbbrowser) 
// 上下邊緣檢測
if (distancey > 0 && scrolltop == 0) 
// 下邊緣檢測
if (distancey < 0 && (scrolltop + 1 >= data.maxscroll)) 
},touchend: function
() 
});// 防止多次重複繫結
container.data('isbindscroll', true);
};

html如下：

class="aside">

class="aside-overlay hideaside">

class="aside-content">

class="module module-filter-list">

class="module-main scrollable">

div>

使用：

$(
'#aside').addclass('active');
$.smartscroll($(
'#aside'), '.scrollable');
$('html').addclass('noscroll');

滑動表層div時阻止底層div滑動

DIV滑動效果

div巢狀點選事件,div巢狀點選阻止冒泡

div自動滑動，滑鼠移上停止滑動

滑動表層div時阻止底層div滑動

DIV滑動效果

div巢狀點選事件,div巢狀點選阻止冒泡

div自動滑動，滑鼠移上停止滑動

相關推薦