移動Safari：禁用滾動頁面「屏幕外」

我想阻止滾動頁面「脫離iPhone屏幕」（當灰色Safari瀏覽器的頁面邊框後面的背景可見時）。要做到這一點，我取消touchmove事件：移動Safari：禁用滾動頁面「屏幕外」

// Disables scrolling the page out of the screen. 
function DisableTouchScrolling() 
{ 
    document.addEventListener("touchmove", function TouchHandler(e) { e.preventDefault(); }, true); 
}

不幸的是，這也禁用鼠標移動事件：當我在一個按鈕，輕按，然後將我的手指出來，然後鬆開屏幕，按鈕的onclick事件無論如何。

我試過在鼠標事件上繪製觸摸事件，因爲這裏描述爲：http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript/，但無濟於事（同樣的行爲）。

任何想法？

來源

2011-10-31 noober

從我對您的問題的理解中，您已經嘗試將您上面介紹的代碼與the code snippet provided by Ross Boucher on Posterous結合起來。試圖將這兩個片段背靠背組合將無法使用，因爲在禁用touchmove時，您還禁用了允許mousemove通過他的示例工作的墊片。

This question and its answers爲您的問題勾畫出一個可行的解決方案。你應該嘗試這兩個片段，看看他們是否解決您的問題：

This snippet,它禁用舊的滾動行爲：

elementYouWantToScroll.ontouchmove = function(e) { 
    e.stopPropagation(); 
};

或者這一次，從the same：

document.ontouchmove = function(e) { 
    var target = e.currentTarget; 
    while(target) { 
     if(checkIfElementShouldScroll(target)) 
      return; 
     target = target.parentNode; 
    } 

    e.preventDefault(); 
};

然後，降在the code on Posterous：

function touchHandler(event) 
{ 
    var touches = event.changedTouches, 
     first = touches[0], 
     type = ""; 
     switch(event.type) 
    { 
     case "touchstart": type = "mousedown"; break; 
     case "touchmove": type="mousemove"; break;   
     case "touchend": type="mouseup"; break; 
     default: return; 
    } 

      //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //   screenX, screenY, clientX, clientY, ctrlKey, 
    //   altKey, shiftKey, metaKey, button, relatedTarget); 

    var simulatedEvent = document.createEvent("MouseEvent"); 
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
           first.screenX, first.screenY, 
           first.clientX, first.clientY, false, 
           false, false, false, 0/*left*/, null); 

                       first.target.dispatchEvent(simulatedEvent); 
    event.preventDefault(); 
}

而且應該爲你做。如果沒有，其他的東西不適用於Mobile Safari。

來源

2012-04-02 22:49:25 MrGomez

touchHandler如何連線？ – blaster

不幸的是，我還沒有時間去看看上面的內容，但是正在研究一個相同的問題，並發現DOM中元素的嵌套和你應用它的關係會影響處理器很多（猜測以上也解決了這個問題 - 'var target = e.currentTarget'）。

基本上我使用了一個稍微不同的方法（我喜歡反饋），基本上使用了一個類「鎖定」，我分配給每個元素（包括所有子元素），我不希望網站滾動時touchmoves它。

E.g.在HTML：

<header class="locked">...</header> 
<div id="content">...</div> 
<footer class="locked"></div>

然後，我有一個事件監聽器在該類運行（請原諒我的懶惰jQuery的選擇）：

$('.ubq_locked').on('touchmove', function(e) { 
    e.preventDefault(); 
});

這工作得很好，我對iOS和Android以及至少使我能夠控制不把監聽器附加到我知道會導致問題的元素上。順便提一下，你需要注意你的Z-index值。

另外，如果它是觸摸設備，我只附加偵聽器，例如，像這樣：

function has_touch() { 
    var isTouchPad = (/hp-tablet/gi).test(navigator.appVersion); 
    return 'ontouchstart' in window && !isTouchPad; 
}

這種非觸摸設備不會受到影響。

如果你不想垃圾你的HTML，你當然可以將選擇器寫入一個數組，並通過ontouchmove運行，但我希望在性能方面會更昂貴（我的知識是有限的雖然）。希望這可以幫助。

來源

2013-06-27 01:05:20 phil

移動Safari：禁用滾動頁面「屏幕外」

回答

相關問題