Question

所以我在div元素中有一个jQuery动画。云从左到右移出屏幕并重复。我追加它们然后像这样动画：

$('#clouds').append("<div id='cloud1' class='cloud'><img src='/images/cloud1.png' ></div>");

function moveCloud1() {
    var cloudwidth = $('#cloud1 img').width();
    var winWidth = $(window).width();
    var rand_y = 60 + (Math.random() * 200);
    $('#cloud1').delay(500).css({left: -400, top: rand_y});
    $('#cloud1').animate({
        left: winWidth
    }, (20000+(rand_y*5)), "linear", function() {
        moveCloud1();
    });
}

所有这些都在这样的地方聚集在一起：

<div class="city_container">
    <div id="clouds"></div>
    <div class='city'></div>
    <div class='sky'></div>
</div>

我很快注意到，当云移动到右侧视口之外时，水平滚动显示的能力，因此我将overflow-x: hidden;添加到body甚至html。最后也是#clouds（我后来添加的一个元素，希望能解决这个问题。之前我只是在city_container中添加了云元素）。它在常规浏览器（如Chrome和Safari）中运行良好，但是一旦我在iPhone上尝试使用该网站，我就可以在地平线上滚动，这也适用于Android手机。即使我将overflow-x: hidden;添加到我怀疑允许这种奇怪现象的所有内容中。（是的，也是对于city_container）我真的不知道还有什么可以尝试。我不希望它允许水平滚动。

为了完整起见，这包含在我的html的头部：

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />

我还确保将宽度设置为窗口的宽度。 body和wrapper-div都有width: 100%;。

Overflow-x无法在移动设备上运行，即使包装类

0 个答案: