堆棧內存溢出
  簡體   English   中英

禁用iPhone Web應用程序中的滾動？

[英]Disable scrolling in an iPhone web application?

 原文  2010-05-23 01:08:53  1   9    javascript/ iphone/ scroll

問題描述

有沒有辦法在iPhone網絡應用程序中完全禁用網頁滾動？ 我在谷歌上試過很多東西，但似乎都沒有用。

這是我當前的標題設置： 

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>

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

似乎不起作用。

9 個解決方案

解決方案1
 56  2010-05-23 02:45:31

更改為touchstart事件而不是touchmove 。 在One Finger Events下，它表示在平移期間沒有發送任何事件，因此touchmove可能為時已晚。

我將監聽器添加到文檔中，而不是正文。

例： 

document.ontouchstart = function(e){ 
    e.preventDefault(); 
}

解決方案2
 16  2014-11-10 22:07:46

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

不要使用ontouchmove屬性來注冊事件處理程序，因為您正在運行時可能會覆蓋現有的事件處理程序。 請改用addEventListener （請參閱MDN頁面上有關IE的說明）。

請注意，防止window或document上的touchstart事件的默認值將禁用下降區域的滾動。

為了防止文檔的滾動而將其他所有事件的完整防止默認第一touchmove以下事件touchstart ： 

var firstMove;

window.addEventListener('touchstart', function (e) {
    firstMove = true;
});

window.addEventListener('touchmove', function (e) {
    if (firstMove) {
        e.preventDefault();

        firstMove = false;
    }
});

這樣做的原因是移動Safari正在使用第一個移動來確定文檔的正文是否正在滾動。 我在設計更復雜的解決方案時意識到了這一點。

如果這將停止工作，更復雜的解決方案是檢查touchTarget元素及touchTarget元素，並制作可以滾動到的方向的映射。 然后使用第一個touchmove事件來檢測滾動方向，看看它是否要滾動文檔或目標元素（或任何一個目標元素父項）： 

var touchTarget,
    touchScreenX,
    touchScreenY,
    conditionParentUntilTrue,
    disableScroll,
    scrollMap;

conditionParentUntilTrue = function (element, condition) {
    var outcome;

    if (element === document.body) {
        return false;
    }

    outcome = condition(element);

    if (outcome) {
        return true;
    } else {
        return conditionParentUntilTrue(element.parentNode, condition);
    }
};

window.addEventListener('touchstart', function (e) {
    touchTarget = e.targetTouches[0].target;
    // a boolean map indicating if the element (or either of element parents, excluding the document.body) can be scrolled to the X direction.
    scrollMap = {}

    scrollMap.left = conditionParentUntilTrue(touchTarget, function (element) {
        return element.scrollLeft > 0;
    });

    scrollMap.top = conditionParentUntilTrue(touchTarget, function (element) {
        return element.scrollTop > 0;
    });

    scrollMap.right = conditionParentUntilTrue(touchTarget, function (element) {
        return element.scrollWidth > element.clientWidth &&
               element.scrollWidth - element.clientWidth > element.scrollLeft;
    });

    scrollMap.bottom =conditionParentUntilTrue(touchTarget, function (element) {
        return element.scrollHeight > element.clientHeight &&
               element.scrollHeight - element.clientHeight > element.scrollTop;
    });

    touchScreenX = e.targetTouches[0].screenX;
    touchScreenY = e.targetTouches[0].screenY;
    disableScroll = false;
});

window.addEventListener('touchmove', function (e) {
    var moveScreenX,
        moveScreenY;

    if (disableScroll) {
        e.preventDefault();

        return;
    }

    moveScreenX = e.targetTouches[0].screenX;
    moveScreenY = e.targetTouches[0].screenY;

    if (
        moveScreenX > touchScreenX && scrollMap.left ||
        moveScreenY < touchScreenY && scrollMap.bottom ||
        moveScreenX < touchScreenX && scrollMap.right ||
        moveScreenY > touchScreenY && scrollMap.top
    ) {
        // You are scrolling either the element or its parent.
        // This will not affect document.body scroll.
    } else {
        // This will affect document.body scroll.

        e.preventDefault();

        disableScroll = true;
    }
});

這樣做的原因是移動Safari正在使用第一次觸摸移動來確定文檔正在滾動還是元素（或任何一個目標元素父項）並堅持這一決定。

解決方案3
 13  2012-05-01 15:13:03

如果你使用jquery 1.7+，這很好用： 

$("donotscrollme").on("touchmove", false);

解決方案4
 12  2011-11-17 22:28:49

這應該工作。 頂部或底部沒有灰色區域:) 

<script type="text/javascript">
   function blockMove() {
      event.preventDefault() ;
}
</script>

<body ontouchmove="blockMove()">

但是這也會禁用任何可滾動區域。 如果您想保留可滾動區域並仍然刪除頂部和底部的橡皮筋效果，請參閱此處： https ： //github.com/joelambert/ScrollFix 。

解決方案5
 10  2013-06-13 14:19:39

禁用： 

document.ontouchstart = function(e){ e.preventDefault(); }

啟用： 

document.ontouchstart = function(e){ return true; }

解決方案6
 10 已采納  2015-06-01 16:37:14

'self.webView.scrollView.bounces = NO;'

只需在應用程序的mainViewController.m文件的“viewDidLoad”中添加這一行。 你可以在Xcode中打開它並添加它。

這應該使頁面沒有任何橡皮筋反彈仍然在應用程序視圖中啟用滾動。

解決方案7
 4  2010-10-19 21:24:03

必須從主屏幕啟動該頁面才能使元標記生效。

解決方案8
 1  2013-05-30 13:03:05

document.ontouchmove = function(e){ 
    e.preventDefault(); 
}

實際上是我發現的最佳選擇它允許你仍然能夠點擊輸入字段以及使用jQuery UI拖動來拖動東西，但它會阻止頁面滾動。

解決方案9
 0  2017-09-20 21:02:13

我嘗試了上面的答案，特別是Gajus，但都沒有。 最后我找到了下面的答案解決問題，只有主體不滾動，但我的網絡應用程序內的其他滾動部分都工作正常。 只需為您的身體設置固定位置： 

body {

height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 禁用在iPhone Web應用程序中移動但保留滾動？ iPhone Web App - 禁用正文滾動但允許在正文中的所有元素 禁用滾動網頁iPad 在我的Web應用程序中滾動 如何在iPhone的HTML中禁用水平滾動 iPhone Web App禁用緩存 在iPhone / iPad的BUT中啟用/禁用滾動啟用網站滾動 使用 iScroll 在 iOS 中的 web 應用程序中滾動 預加載網頁時禁用滾動 如何禁用，啟用然后再次禁用使用e.preventDefault（）;在ipad / iphone中滾動？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM