【问题标题】:Disable scrolling in all mobile devices在所有移动设备中禁用滚动
【发布时间】:2012-05-14 23:39:13
【问题描述】:

这听起来应该在整个互联网上都有解决方案,但我不确定为什么我找不到它。我想在移动设备上禁用水平滚动。基本上试图实现这一点:

body{
   overflow-x:hidden  // disable horizontal scrolling.
}

这可能是相关信息:我的 head 标签中也有这个,因为我也不希望用户能够缩放:

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />

谢谢

【问题讨论】:

标签: android iphone css mobile scroll


【解决方案1】:
html, body {
  overflow-x: hidden;
}
body {
  position: relative;
}

相对位置很重要,我只是偶然发现了它。没有它就无法工作。

【讨论】:

  • 同意@daekano 这个答案应该被标记为接受的答案。这也对我有用。
  • 谁能解释一下 position:relative 是如何帮助这项工作的?
  • 我无法相信像 position: relative; 这样小的东西。使它无法工作。谢谢!
  • 它可以工作,但会破坏触摸设备的平滑滚动...(我似乎无法向上推并看到页面滚动,只要我松开手指,它就会停止滚动)
  • 无论出于何种原因,这适用于 android 设备,但不适用于我尝试的任何 IOS 设备
【解决方案2】:

cgvector 答案对我不起作用,但确实如此:

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

我不会就这样离开它,需要更智能的逻辑来选择何时阻止滚动,但这是一个好的开始。

取自这里: Disable scrolling in an iPhone web application?

【讨论】:

  • 你明白,你甚至禁用垂直页面滚动,对吧?
  • 是的,这就是为什么它说a smarter logic is needed to select when to prevent the scrolling
  • 我不能使用它,因为这也会阻止任何 HTML 5 contextmenu 显示(支持 Firefox 20 for Android)。
  • 是我自己还是这看起来完全鲁莽?
  • Chango - 完美解决方案!当我在我的移动网络应用上使用自定义滚动脚本时,这段代码终于一次性解决了我所有的问题!
【解决方案3】:

为了后代:

要防止滚动但保留上下文菜单,请尝试

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

它仍然比某些人更喜欢阻止,但对于大多数浏览器来说,唯一阻止的默认行为应该是滚动。

对于一个更复杂的解决方案,允许在不可滚动的主体内滚动元素并防止橡皮筋,看看我的答案在这里:

https://stackoverflow.com/a/20250111/1431156

【讨论】:

  • 刚刚对此进行了测试,并与 iOS 上的 Safari 以及 Android 上的 Chrome 和 Firefox 完美配合。
  • 当前的 Chrome 版本需要这个:document.body.addEventListener('touchmove', function(e){ e.preventDefault(); }, { passive: false });。请注意,对象变为true,因此使用了事件捕获。
【解决方案4】:

我怀疑大多数人真的想禁用缩放/滚动,以提供更像应用程序的体验;因为答案似乎包含缩放和滚动解决方案的元素,但没有人真正确定其中任何一个。

滚动

要回答 OP,要禁用滚动,您似乎唯一需要做的就是拦截窗口的 scrolltouchmove 事件,并在它们生成的事件上调用 preventDefaultstopPropagation;像这样

window.addEventListener("scroll", preventMotion, false);
window.addEventListener("touchmove", preventMotion, false);

function preventMotion(event)
{
    window.scrollTo(0, 0);
    event.preventDefault();
    event.stopPropagation();
}

在您的样式表中,确保您的 bodyhtml 标签包含以下内容:

html:
{
    overflow: hidden;
}

body
{
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
}

缩放

但是,滚动是一回事,但您可能还想禁用缩放。您对标记中的元标记执行的操作:

<meta name="viewport" content="user-scalable=no" />

所有这些加在一起为您提供类似应用程序的体验,可能最适合画布。

(如果您使用画布,请注意某些人的建议,即在元标记中添加 initial-scalewidth 等属性,因为与块元素不同,画布 缩放 其内容,而且你经常会得到一个丑陋的画布)。

【讨论】:

  • 经过几个小时的搜索和尝试,只有这种方法对我有用。我不知道我多么感谢你,伙计,你救了我的命!
  • html 设置overflow 显然是必要的。没有它,但有了这个线程的所有其他建议,仍然会发生一些滚动。在我的情况下,不需要预防事件。
  • 正如@brannigan 在另一条评论中提到的,使用window.addEventListener("touchmove", preventMotion, { passive: false });
【解决方案5】:

尝试添加

html {
  overflow-x: hidden;
}

还有

body {
  overflow-x: hidden;
}

【讨论】:

  • 阅读我的回答。我说将它添加到 HTML 标记中,而不仅仅是正文。
  • 在某些移动设备上完全禁用滚动。
【解决方案6】:

在风格中使用它

body
{
overflow:hidden;
width:100%;
}

在head标签中使用这个

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

【讨论】:

  • overflow:hidden 和 width:100% 在 body 和 html 中都足够了。谢谢! (在 iPhone 中!)
【解决方案7】:

在页眉中添加

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

在页面样式表中,添加

html, body {
  overflow-x: hidden;
  overflow-y: hidden;
}

既是html又是body!

【讨论】:

    【解决方案8】:

    CSS 属性 touch-action 可能会为您提供所需的内容,尽管它在所有目标浏览器中都是 may not work

    html, body {
        width: 100%; height: 100%;
        overflow: hidden;
        touch-action: none;
    }
    

    【讨论】:

      【解决方案9】:

      position 设置为 relative 对我不起作用。仅当我将 body 的位置设置为 fixed 时才有效:

      document.body.style.position = "fixed";
      document.body.style.overflowY = "hidden";
      document.body.addEventListener('touchstart', function(e){ e.preventDefault()});
      

      【讨论】:

        【解决方案10】:

        这对我有用:

        window.addEventListener("touchstart", function(event){
                     if(event.target.tagName=="HTML" || event.target.tagName=="BODY"){
                             event.preventDefault();
                     }
        } ,false);
        

        它不能 100% 工作,我还添加了这个:

        window.addEventListener("scroll",function(){
            window.scrollTo(0,0)
        },false)
        

        【讨论】:

          【解决方案11】:

          在尝试所有答案都没有成功后,我设法通过简单地添加以下内容来关闭我的移动滚动:

          html,
          body {
            overflow-x: hidden;
            height: 100%;
          }
          
          body {
            position: relative;
          }
          

          为此使用% 而不是vh 很重要。 height: 100% 是我一直想念的东西,疯了。

          【讨论】:

          • 我希望我能在 24 小时前偶然发现您的答案,因为这样可以节省我一大堆时间来得出相同的结论。高度:100% 是我需要让它全部工作的缺失部分。因为我使用的 body 的每个子元素都是 position: absolute,所以它没有给 body 元素设置高度。
          【解决方案12】:

          对于 Apple 设备,position: relative 不起作用。以下代码适用于所有设备:

          html, body {
            overflow: hidden;
            position: fixed;
          }
          

          【讨论】:

            【解决方案13】:

            我迟到了,但我添加了这个答案,因为我尝试过的其他方法在我的具体情况下都不起作用。捕获 touchmove、scroll 等事件的组合没有任何效果,并且 position: relative on body 使一切都消失了。

            我发现我必须在 HTML 和 BODY 元素上添加 height: 100% 。可能并非所有以下规则都是必需的,但我花了足够长的时间才偶然发现这个神奇的组合并且它似乎有效。

            html {
                height: 100%;
                overflow: hidden;
            }
            body{
                margin: 0;
                overflow: hidden;
                height: 100%;
                position: relative;
            }
            

            除此之外,我在 HTML 头中还有以下内容:

            <meta name="viewport" content="width=device-width, initial-scale=1">
            

            我的应用大量使用了绝对位置元素,其中一些元素在不同时间部分滑出屏幕,因为它们滑出视野。结果,body 元素中没有任何内容可以给 body 任何区域/大小。

            我发现移动设备上发生的“滚动”是由于浏览器不知道页面大小的范围以进行视口(缩放到设备宽度)计算的结果。似乎高度为 0px 的 body 无法向浏览器传达页面的高度或宽度,因此将 body 的高度设置为 100% 是解决方案的关键。

            编辑:找到我的解决方案后再次查看答案,我意识到“Toms Codery”的另一个答案与我的解决方案基本相同,尽管他只是在 x 方向。

            【讨论】:

              【解决方案14】:

              最简单的方式,非常简单,只有 CSS 代码:

              body, html {
                  overflow-x: hidden;
                  position: relative;
              }

              【讨论】:

                【解决方案15】:

                以下对我有用,虽然我没有测试每一个要测试的设备:-)

                $('body, html').css('overflow-y', 'hidden');
                $('html, body').animate({
                    scrollTop:0
                }, 0);
                

                【讨论】:

                  猜你喜欢
                  • 1970-01-01
                  • 1970-01-01
                  • 2016-02-02
                  • 1970-01-01
                  • 2017-07-11
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  相关资源
                  最近更新 更多