無法停止內部div的結束時外部div的滾動

用例： - 如果用戶正在滾動內部div，則在內部div末端達到時不應滾動外部div。無法停止內部div的結束時外部div的滾動

如果內部div已經達到最後，下面的代碼可以很好地工作。即touchstart/touchmove事件在內部div達到結束之後觸發。

但是，如果我不解除觸摸並保持滾動，並且如果在此過程中內部div的末端已達到，它會開始滾動外部div。

$('body').find('.scrollableDiv').on(
    { 
     'touchstart' : function(e) { 
     touchStartEvent = e; 
     }, 
     'touchmove' : function(e) { 
     e.stopImmediatePropagation(); 
     $this = $(this); 
     if ((e.originalEvent.touches[0].pageY > touchStartEvent.originalEvent.touches[0].pageY && this.scrollTop == 0) || 
      (e.originalEvent.touches[0].pageY < touchStartEvent.originalEvent.touches[0].pageY && this.scrollTop + this.offsetHeight >= this.scrollHeight)){ 
      e.preventDefault(); 
     } 
     }, 
    });

一旦達到內部div的末端，我該如何停止滾動？我想在Android設備上的瀏覽器上實現此目的。在這方面有人可以幫助我嗎？

注意：用戶甚至應該能夠滾動外部div。

在此先感謝。

來源

2013-08-21 Sashwat

這在我看來是一個壞主意。您試圖編寫屬於Web瀏覽器本身的代碼，以便在您的網站上以與其他網站上的工作方式不一致的方式更改瀏覽器的用戶界面，方法是禁用用戶可能需要的功能。 –

對不起，如果我沒有說清楚我的觀點。其實我試圖給一個功能，用戶可以滾動div和獨立滾動內部div應該永遠不滾動外部div。考慮一種情況，即用戶在內部div中快速滾動，一旦內部div到達結束頁面就會導致頁面滾動，然後用戶必須再次滾動頁面以使內部div進入可見視圖。這不是一個糟糕的用戶體驗嗎？ – Sashwat

Mozilla似乎同意你的觀點，因爲Firefox不會在任何平臺上執行此操作，無論是在桌面上（使用滾輪）還是在移動設備上（使用手指）。蘋果似乎不同意你的看法。我認爲這可能是決定所屬的地方，並試圖使其在不同網站上以不同的方式工作，這本身就是糟糕的用戶體驗。 –

如果你使用的是JQuery，我會使用一些使用scrollTop（）來檢查用戶是否已經到達可滾動div的底部，如果是，可能觸發一個事件來取消它們的滾動。或者你可能想要做的事情。沿線的

東西：

$(document).ready(function(){ 
    $('.scrollableDiv').bind('scroll',scroll_check); 
}); 

function scroll_check(e){ 
    var elem = $(e.currentTarget); 
    if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()){ 
     // set overflow-y hidden? 
    } 
}

來源

2013-08-27 22:18:20

滾動基本上在object/div已經滾動後調用。這是一篇參考文章。 http://tjvantoll.com/2012/08/19/onscroll-event-issues-on-mobile-browsers/ – Sashwat

我恐怕沒有時間寫的顯式代碼來解決這個問題，但我要告訴你一個概念性的解決方案，還可以幫助您。

在DOM準備就緒的情況下，使用position: relative包裝每個overflow：scroll元素。
在觸摸開始，對於overflow: scroll每個祖先，設置overflow: visible，position: absolute，得到計算的高度&寬度和應用這些作爲內嵌樣式，並設置頂部是scrollTop的負 - 並設置包裝的overflow到hidden：這意味着它將處於與第一位相同的位置，但無法通過滾動。
在觸摸結束，刪除步驟應用的樣式2.

我已經可以看到警告：

如果您使用相對或絕對定位爲您溢出內佈局：滾動元素（而且它們本身沒有相對或絕對的定位），這會與你的佈局緊密相關。
如果任何滾動元素在DOM準備完成後被包裝，則需要爲每個元素應用一個包裝。

...但它肯定是可行的......

來源

2013-09-02 16:56:31 Barney

無法停止內部div的結束時外部div的滾動

回答

相關問題