PhoneGap/Cordova：如何防止水平滚动

Question

PhoneGap/Cordova：如何防止水平滚动

htmlcordovascroll

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>

This is what happens on horizontal scroll

- MeltingDog

滚动超出内容是否具有反弹效果？ - nhahtdh

@nhahtdh 不，它的行为就像 div 超出了包装器一样 - 它刚好滚动到白色空间里。 - MeltingDog

我似乎无法在设备上重现这个问题。你能发一张截图吗？ - nhahtdh

@nhahtdh 感谢您的检查！已添加上面的屏幕截图。请注意：当页面首次加载时，它看起来很好，但是当您向右滚动时会出现这种情况。 - MeltingDog

不，我认为没有任何方法，因为滚动条在 Web 视图内部，并且该属性是只读的。 - nhahtdh

显示剩余2条评论

6个回答

6

我花了很长时间寻找解决这个问题的方法。最终，我用以下方式解决了它。我为 body 和 html 标签设置了样式：

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

接着我向中添加了

并对其进行了样式设置：

overflow-y: auto;
height: 100%;

所以，我有一个包含垂直滚动条的div的固定身体。

- Екатерина Дементьева

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

- Ganesh karthik

4

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

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

- Gustus

2

这甚至阻止了垂直滚动。 - Anas Azeem

如何在尝试使用removeEventListener之后删除此监听器，但仍无法滚动？ - Pranay Dutta

2

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

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

根据文档，Android和iOS都支持此功能。

默认值：false

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

- Script47

注意：从技术角度来看，这是正确的，但有些人可能会遇到非常小的超滚动（在我的情况下只有一个像素），而此答案可以解决这个问题。 - Ryan Willis

0

在我的情况下，它是像下面这样的破损样式。

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

这会导致 div 横向比 body 更大。当应用程序在浏览器中运行时，我可以看到滚动条。将宽度设置为 90%（最初的意图）解决了问题。

通常情况下，正如已经在这里指出的那样，只需找到具有错误样式的元素，使您的页面横向扩展，并进行修复即可。

顺便说一句，在上述情况下，DisallowOverscroll没有起到帮助作用。

- yurin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Justus Romijn · Accepted Answer

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

我不知道具体的问题，但看起来你的一个元素正在超出包装器。例如，您可以在css中尝试这样做：

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

尽管这么做可能是个更好的主意，但找出你的页面为什么会水平扩展也许更合适？