2013-07-29 109 views
0

我想禁用滾動我的整個JQM的web應用程序,但如果你試圖在一個div滾動與某一類,然後滾動是允許允許子元素touchmove

所以我滾動DIV,.info有應用overflow:scroll它和我有這樣的腳本來嘗試檢測,如果你現在接觸它

$('.info').bind('touchstart', function (e) { 
    if (e.type == "touchstart") { 
     return true; 
    } else { 
     event.preventDefault(); 
    } 
}); 
$(document).bind('touchmove', function() { 
    event.preventDefault(); 
}) 

,滾動關閉該文檔,但是當我嘗試滾動我的信息的div,它不會滾動。

現在我已經看到了圍繞這個想法的一些帖子,但主要是要固定一個對象位置,以便在文檔滾動時它保持在同一個位置。

回答

5

這是我怎麼一直在做:

$(document).on('touchmove', function(ev) { 
if (!$(ev.target).closest('.is-scrollable').length) { 
    ev.preventDefault(); 
    } 
}) 

.is-scrollable將是你的類,.info在這種情況下。

編輯:固定在滾動的div的頂部和底部滾動:

$('.is-scrollable').on('touchstart', function() { 
    var el = $(this); 
    if (el.scrollTop() <= 0) { 
     el.scrollTop(1); 
    } 
    if (el.scrollTop() >= el[0].scrollHeight) { 
     el.scrollTop(el[0].scrollHeight - 1); 
    } 
}); 
+0

大,完美的作品。感謝您的快速回復 – mhartington

+0

這在容器邊緣失敗。例如,如果您滾動到「可滾動」容器的末尾,然後開始新的滾動並繼續向下滾動,則會移動背景頁面。 – Mathletics

+0

的確如此。你還需要加入類似我的編輯添加的內容。如果除此之外還有一種解決方法,那會很好。 – kalley