Android浏览器禁用x滚动也会禁用y滚动

时间:2013-07-03 22:47:22

标签: android html css mobile

我有一个移动网页,我已禁用水平滚动,因为它干扰了我正在做的一些动画。但是,当我在html和body上设置overflow-x:hidden时,由于某种原因,android失去了垂直滚动的能力。 iPad似乎仍然无法解决。如果重要的话我在android 2.3上

以下是问题的一些示例代码:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <style type="text/css">
        html,body {
            position:absolute;
            height:100%;
            width:100%;
            padding:0px;
            margin:0px;
            overflow-x:hidden;
        }

        .content span {
            white-space:nowrap;
            display:block;
        }
    </style>
  </head>
  <body>
    <div class="content">
        <span>Really long line to force horizontal scrolling. Really long line to force horizontal scrolling. Really long line to force horizontal scrolling. Really long line to force horizontal scrolling. Really long line to force horizontal scrolling. Really long line to force horizontal scrolling. Really long line to force horizontal scrolling. Really long line to force horizontal scrolling.</span>

        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>

        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>

        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>

        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>

        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>

        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
    </div>
  </body>
</html>

1 个答案:

答案 0 :(得分:0)

我遇到了类似的问题,但从我看到的内容来看,阻止滚动是

height: 100%;

尝试评论Android 2.X的留置权,你可能会再次滚动它。

如果您找到了可以保留的方式,请告知

html, body {
height: 100%;
}

还在滚动。

谢谢,祝你好运 -