Question

我在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> <iframe src="http://www.mbff.com.au/getthelook"></iframe> </div> </body>。

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

更新：

按要求在页面上编码：

{{1}}

This is what happens on horizontal scroll

Answer 1

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

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

中尝试此操作

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

虽然最好找出网页水平扩展的原因？

Answer 2

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

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

之后，我已将div添加到body并为其设置样式：

overflow-y: auto;
height: 100%;

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

Answer 3

// 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;
    }
});

Answer 4

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

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

Answer 5

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

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

Android和iOS根据documentation支持。

默认值：false

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

Answer 6

在我的情况下，它的样式如下所示

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

这会导致div在水平方向上大于主体。当应用在浏览器中运行时，我可以看到滚动。将宽度设置为90％（按照最初的意图）可以解决此问题。

通常，正如它已经指出的here，足以找到样式错误的元素，这会使您的页面水平扩展并对其进行修复。

BTW DisallowOverscroll 在上述情况下无济于事。

PhoneGap / Cordova：防止水平滚动

6 个答案: