8

我有一个基于 Cordova 的应用程序，在我的一些页面上，我可以将内容水平滚动到空白区域。

这很奇怪，因为我那里没有任何东西超出我#wrapper的设置，它设置为width: 100%.

所以我想知道是否有一种方法可以完全禁用应用程序中的水平滚动？

更新：

页面上的代码按要求：

body {
    background-color: #fff;
    font-family:Arial, Helvetica, sans-serif;
    color: #b7b8b9;
    height: 100%;
    width: 100%;
}

iframe{
    border: none;
    width: 100%;
    /*margin-top: 50px;*/


   }

#header{
    height: 50px;
    width: 100%;
}


<body>
         <div id="wrapper">
        <div id="header">
            <div class="headerback"><a href="index.html">Home</a></div>
            <div class="headerrefresh"><script>var pathname = window.location.pathname;</script><script>document.write('<a href="'+pathname+'">Refresh</a>')</script></div>
            <div class="headertitle"><h2>Get the Look</h2></div>

        </div><!--HEADER-->
    <iframe src="http://www.mbff.com.au/getthelook"></iframe>
    </div>
    </body>

这是水平滚动时发生的情况

4

6 回答 6

7

尝试使用您设备的确切尺寸在 Chrome (webkit) 中调试您的页面。这为我解决了大多数渲染问题。

我不知道这里的具体问题，但看起来您的元素之一正在包装器之外流动。例如，您可以在您的css:

div.wrapper { overflow: hidden; width: inherit; }

尽管找出页面水平扩展的原因可能是一个更好的主意？

于 2012-07-04T09:36:43.673 回答
6

我一直在寻找这个问题的解决方案。最后我通过以下方式解决了它。body我为和html标签设置样式：

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

之后，我添加div并body设置了它的样式：

overflow-y: auto;
height: 100%;

所以，我有固定的身体，其中包含带有垂直滚动条的 div。

于 2015-07-09T14:19:17.297 回答
4 
// Phone Gap disable only horizontal scrolling in Android.

// Add this code in your Phone Gap  Main Activity.Initially Declare the variable 

private float m_downX;

//Then add this code after loadUrl

this.appView.setOnTouchListener(new View.OnTouchListener() {
    public boolean onTouch(View v, MotionEvent event) {

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN: {
                // save the x
                m_downX = event.getX();
            }
            break;

            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP: {
                // set x so that it doesn't move
                event.setLocation(m_downX, event.getY());
            }
            break;
        }
        return false;
    }
});
于 2012-09-25T07:39:59.843 回答
4

尝试将以下代码添加到您的 .html 文件中：

document.body.addEventListener('touchmove', function(event) {
    event.preventDefault();
}, false);
于 2013-03-26T18:37:53.870 回答
2

为了完整起见，我认为preference应该添加使用官方方法通过标签执行此类操作的答案：

<preference name="DisallowOverscroll" value="true"/>

根据文档，由 Android 和 iOS 支持。

默认值：假

如果您不希望界面在用户滚动超过内容的开头或结尾时显示任何反馈，请设置为 true。在 iOS 上，过度滚动手势会导致内容弹回其原始位置。在 Android 上，它们会在内容的顶部或底部边缘产生更微妙的发光效果。

于 2017-07-13T13:35:32.000 回答
0

就我而言，它的样式如下所示

<body>
  <div style="margin-left:5%; width:100%">Content</div>
</body>

这导致 div 在水平方向上变得比 body 大。当应用程序在浏览器中运行时，我可以看到滚动。将宽度设置为 90%（如最初预期的那样）解决了这个问题。

通常，正如这里已经指出的那样，足以找到样式错误的元素，从而使您的页面水平扩展并修复它。

BTW DisallowOverscroll在上述情况下没有帮助。

于 2019-12-16T18:35:36.713 回答