iOS Safari - 如何禁用overscroll，但允許可滾動的div正常滾動？

Question

我正在研究基於iPad的網絡應用程序，並且需要防止過度滾動，以使其看起來不像網頁。我目前使用這種凍結視口並禁用反彈時：

document.body.addEventListener('touchmove',function(e){ 
     e.preventDefault(); 
    }); 

這個偉大的工程來禁用反彈時，但我的應用程序有幾個滾動的div，並上面的代碼防止它們滾動。

我只針對iOS 5及以上版本，所以我避免了像iScroll這樣的hacky解決方案。相反，我使用這個CSS我可滾動的div：

.scrollable { 
    -webkit-overflow-scrolling: touch; 
    overflow-y:auto; 
} 

此作品，未經文檔反彈時劇本，但沒有解決的div滾動問題。

沒有一個jQuery插件，有沒有辦法使用反彈時修復，但免除我的$（「滾動」）的div？

編輯：

我發現的東西，是一個不錯的解決方案：

// Disable overscroll/viewport moving on everything but scrollable divs 
$('body').on('touchmove', function (e) { 
     if (!$('.scrollable').has($(e.target)).length) e.preventDefault(); 
}); 

當你滾過div的開頭或結尾的視域依然繼續。我想找到一種方法來禁用它。

Answer 1

您是否可以在您的overscroll禁用代碼中添加更多邏輯以確保問題中的目標元素不是您想要滾動的元素？事情是這樣的：

document.body.addEventListener('touchmove',function(e){ 
    if(!$(e.target).hasClass("scrollable")) { 
     e.preventDefault(); 
    } 
}); 

Answer 2

檢查是否想嘗試向下滾動，然後阻止默認操作，以移動停止整個頁面時可達滾動或底部時滾動的元素已經滾動到頂部。

var touchStartEvent; 
$('.scrollable').on({ 
    touchstart: function(e) { 
     touchStartEvent = e; 
    }, 
    touchmove: function(e) { 
     if ((e.originalEvent.pageY > touchStartEvent.originalEvent.pageY && this.scrollTop == 0) || 
      (e.originalEvent.pageY < touchStartEvent.originalEvent.pageY && this.scrollTop + this.offsetHeight >= this.scrollHeight)) 
      e.preventDefault(); 
    } 
}); 

Answer 3

當你滾過DIV

var selScrollable = '.scrollable'; 
// Uses document because document will be topmost level in bubbling 
$(document).on('touchmove',function(e){ 
    e.preventDefault(); 
}); 
// Uses body because jQuery on events are called off of the element they are 
// added to, so bubbling would not work if we used document instead. 
$('body').on('touchstart', selScrollable, function(e) { 
    if (e.currentTarget.scrollTop === 0) { 
    e.currentTarget.scrollTop = 1; 
    } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) { 
    e.currentTarget.scrollTop -= 1; 
    } 
}); 
// Stops preventDefault from being called on document if it sees a scrollable div 
$('body').on('touchmove', selScrollable, function(e) { 
    e.stopPropagation(); 
}); 

注意的開頭或結尾，如果你想阻止整個頁面滾動，當一個div沒有這不會工作，這樣就解決了問題溢出。要阻止，請使用以下事件處理程序，而不是一個正上方（改編自this question）：

$('body').on('touchmove', selScrollable, function(e) { 
    // Only block default if internal div contents are large enough to scroll 
    // Warning: scrollHeight support is not universal. (https://stackoverflow.com/a/15033226/40352) 
    if($(this)[0].scrollHeight > $(this).innerHeight()) { 
     e.stopPropagation(); 
    } 
}); 

Answer 4

使用泰勒道奇的優秀answer一直落後於我的iPad，所以我加了一些限制代碼，現在它的相當光滑。有時在滾動時有一些最小的跳過。

// Uses document because document will be topmost level in bubbling 
$(document).on('touchmove',function(e){ 
    e.preventDefault(); 
}); 

var scrolling = false; 

// Uses body because jquery on events are called off of the element they are 
// added to, so bubbling would not work if we used document instead. 
$('body').on('touchstart','.scrollable',function(e) { 

    // Only execute the below code once at a time 
    if (!scrolling) { 
     scrolling = true; 
     if (e.currentTarget.scrollTop === 0) { 
      e.currentTarget.scrollTop = 1; 
     } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) { 
      e.currentTarget.scrollTop -= 1; 
     } 
     scrolling = false; 
    } 
}); 

// Prevents preventDefault from being called on document if it sees a scrollable div 
$('body').on('touchmove','.scrollable',function(e) { 
    e.stopPropagation(); 
}); 

而且，把下面的CSS修復了一些渲染毛刺（source）：

.scrollable { 
    overflow: auto; 
    overflow-x: hidden; 
    -webkit-overflow-scrolling: touch; 
} 
.scrollable * { 
    -webkit-transform: translate3d(0,0,0); 
} 

Answer 5

這裏有一個仄兼容的解決方案

if (!$(e.target).hasClass('scrollable') && !$(e.target).closest('.scrollable').length > 0) { 
     console.log('prevented scroll'); 
     e.preventDefault(); 
     window.scroll(0,0); 
     return false; 
    } 

Answer 6

在整個文檔像往常一樣首先防止默認操作：

$(document).bind('touchmove', function(e){ 
    e.preventDefault();   
}); 

然後停止將您的元素類傳播到文檔級別。這將停止其到達上述因而函數e.preventDefault（）不被啓動：

$('.scrollable').bind('touchmove', function(e){ 
    e.stopPropagation(); 
}); 

該系統似乎是更加自然和比計算上的所有移動觸摸屏類較不密集。動態生成的元素使用.on（）而不是.bind（）。

也可以考慮這些元標籤，以防止不幸的事情，從您在使用滾動DIV發生：

<meta content='True' name='HandheldFriendly' /> 
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0' name='viewport' /> 
<meta name="viewport" content="width=device-width" /> 

Answer 7

我已經工作了一點workarround沒有jQuery的。不perfert但工作正常（尤其是如果你有一個scoll-Y滾動-X）https://github.com/pinadesign/overscroll/

下跌免費參加，並提高其

Answer 8

我一直在尋找一種方式來阻止所有的身體滾動有一個時彈出一個可滾動區域（一個「購物車」彈出窗口，其中有一個可滾動的購物車視圖）。

我寫了一個非常優雅的解決方案，使用最小的javascript來切換類「noscroll」在你的身體上，當你想要滾動的彈出窗口或div（而不是「overscroll」整個頁面主體） 。

雖然桌面瀏覽器觀察到溢出：隱藏 - iOS似乎忽略了，除非您將位置設置爲固定......這會導致整個頁面變成一個奇怪的寬度，所以您必須手動設置位置和寬度爲好。使用這個CSS：

.noscroll { 
    overflow: hidden; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

與這個jQuery：

/* fade in/out cart popup, add/remove .noscroll from body */ 
$('a.cart').click(function() { 
    $('nav > ul.cart').fadeToggle(100, 'linear'); 
    if ($('nav > ul.cart').is(":visible")) { 
     $('body').toggleClass('noscroll'); 
    } else { 
     $('body').removeClass('noscroll'); 
    } 
}); 

/* close all popup menus when you click the page... */ 
$('body').click(function() { 
    $('nav > ul').fadeOut(100, 'linear'); 
    $('body').removeClass('noscroll'); 
}); 

/* ... but prevent clicks in the popup from closing the popup */ 
$('nav > ul').click(function(event){ 
    event.stopPropagation(); 
}); 

Answer 9

這個工作對我來說（普通的JavaScript）

var fixScroll = function (className, border) { // className = class of scrollElement(s), border: borderTop + borderBottom, due to offsetHeight 
var reg = new RegExp(className,"i"); var off = +border + 1; 
function _testClass(e) { var o = e.target; while (!reg.test(o.className)) if (!o || o==document) return false; else o = o.parentNode; return o;} 
document.ontouchmove = function(e) { var o = _testClass(e); if (o) { e.stopPropagation(); if (o.scrollTop == 0) { o.scrollTop += 1; e.preventDefault();}}} 
document.ontouchstart = function(e) { var o = _testClass(e); if (o && o.scrollHeight >= o.scrollTop + o.offsetHeight - off) o.scrollTop -= off;} 
} 

fixScroll("fixscroll",2); // assuming I have a 1px border in my DIV 

HTML：

<div class="fixscroll" style="border:1px gray solid">content</div> 

Answer 10

這個解決方案沒有按不要求你在你所有的scrollab上放置一個可滾動的類所以更爲普遍。在INPUT元素contenteditables和overflow scroll或autos的所有元素或子元素上都允許滾動。

我使用自定義選擇器，並且還將檢查結果緩存在元素中以提高性能。無需每次都檢查相同的元素。這可能有幾個問題，因爲只是寫了，但我想分享。

$.expr[':'].scrollable = function(obj) { 
    var $el = $(obj); 
    var tagName = $el.prop("tagName"); 
    return (tagName !== 'BODY' && tagName !== 'HTML') && (tagName === 'INPUT' || $el.is("[contentEditable='true']") || $el.css("overflow").match(/auto|scroll/)); 
}; 
function preventBodyScroll() { 
    function isScrollAllowed($target) { 
     if ($target.data("isScrollAllowed") !== undefined) { 
      return $target.data("isScrollAllowed"); 
     } 
     var scrollAllowed = $target.closest(":scrollable").length > 0; 
     $target.data("isScrollAllowed",scrollAllowed); 
     return scrollAllowed; 
    } 
    $('body').bind('touchmove', function (ev) { 
     if (!isScrollAllowed($(ev.target))) { 
      ev.preventDefault(); 
     } 
    }); 
} 

Answer 11

試試這個它會工作完美。

$('body.overflow-hidden').delegate('#skrollr-body','touchmove',function(e){ 
    e.preventDefault(); 
    console.log('Stop skrollrbody'); 
}).delegate('.mfp-auto-cursor .mfp-content','touchmove',function(e){ 
    e.stopPropagation(); 
    console.log('Scroll scroll'); 
}); 

Answer 12

最好的解決辦法是CSS/HTML： 讓一個div爲包裝的元素，如果沒有它已經 ，並將其設置位置予以確定和溢出隱藏。可選，設置寬度和高度爲100％，如果你想讓它填滿整個屏幕並沒有什麼，但整個畫面

#wrapper{ 
 
    height: 100%; 
 
    width: 100%; 
 
    position: fixed; 
 
    overflow: hidden; 
 
}

<div id="wrapper"> 
 
    <p>All</p> 
 
    <p>Your</p> 
 
    <p>Elements</p> 
 
</div>

Answer 13

雖然禁用所有「touchmove」事件似乎是個好主意，只要你需要頁面上的其他可滾動元素，它會導致問題。最重要的是，如果您只在某些元素上禁用了「touchmove」事件（例如，如果您希望該頁面不可滾動，則爲body），只要在其他地方啓用該事件，IOS就會在Chrome中導致無法阻止的傳播酒吧切換。

雖然我無法解釋這種行爲，它看起來像防止的唯一途徑似乎身體的位置設置爲fixed。唯一的問題是你會失去文檔的位置 - 例如，這對於模態尤其惱人。解決這個問題是使用這些簡單的VanillaJS功能的一種方法：

function disableDocumentScrolling() { 
    if (document.documentElement.style.position != 'fixed') { 
     // Get the top vertical offset. 
     var topVerticalOffset = (typeof window.pageYOffset != 'undefined') ? 
      window.pageYOffset : (document.documentElement.scrollTop ? 
      document.documentElement.scrollTop : 0); 
     // Set the document to fixed position (this is the only way around IOS' overscroll "feature"). 
     document.documentElement.style.position = 'fixed'; 
     // Set back the offset position by user negative margin on the fixed document. 
     document.documentElement.style.marginTop = '-' + topVerticalOffset + 'px'; 
    } 
} 

function enableDocumentScrolling() { 
    if (document.documentElement.style.position == 'fixed') { 
     // Remove the fixed position on the document. 
     document.documentElement.style.position = null; 
     // Calculate back the original position of the non-fixed document. 
     var scrollPosition = -1 * parseFloat(document.documentElement.style.marginTop); 
     // Remove fixed document negative margin. 
     document.documentElement.style.marginTop = null; 
     // Scroll to the original position of the non-fixed document. 
     window.scrollTo(0, scrollPosition); 
    } 
} 

使用該解決方案，你可以有一個固定的文件，並在你的頁面可以通過使用簡單的CSS溢出任何其他元素（例如，overflow: scroll;）。無需特殊課程或其他任何東西。

Answer 14

我只好用簡單的令人驚訝的運氣：

body { 
    height: 100vh; 
} 

它的偉大工程，以禁用反彈時的彈出式窗口或菜單，並沒有強制瀏覽器欄出現使用位置時，如：固定的。但是 - 您需要在設置固定高度之前保存滾動位置，並在隱藏彈出窗口時將其恢復，否則，瀏覽器將滾動到頂部。