Question

所以，我有一个网站here。我有一些使用jQuery在页面上移动的云。当您在移动设备上查看页面时，问题就开始了。您可以滚动浏览实际页面并按照云计算。这并不难，而且很多人都注意到了这一点。 PC上没有问题，虽然曾经有过。我禁用了箭头键和空格键作为移动，因此您无法再在PC上复制移动错误。如果有人能帮助我，那就太棒了，谢谢。

编辑：这是云的js。也许是导致这种情况发生的原因。但是，我真正想要的是在可能的情况下完全禁用移动设备上的水平滚动

$(function() {
  var img = $("#cloud"),
      width = img.get(0).width,
      screenWidth = $(window).width(),
      duration = 50000;

  function animatePlane() {
      img.css("left", -width).animate({
          "left": screenWidth
      }, duration, animatePlane);
  }

  animatePlane();
});

Answer 1

查看您的网站，这就是您解决当前问题的方法（存在于桌面浏览器中）：

.header {
  height: auto;
  position: relative;
  overflow: hidden;
  width: 100%;
}

我将解释为什么需要这些规则中的每一条：

width: 100%;百分之百的浏览器窗口
overflow: hidden当元素（如img）移过浏览器窗口的边缘（100％）时，它将是hidden
position: relative - 在.header上执行此操作或上述规则需要在body
height: auto您为子元素扩展超过该高度的元素设置了静态height，如果您不这样做并使用overflow: hidden，则为.header内的垂直元素header将不会显示

重要的是要注意，对于更大的问题，这是一个创可贴修复;该问题是您开发网站的当前方式。还有很多其他问题，这里有一个简短的清单：

不要将整个网站内容包装在.body元素
使用语义类名称，并避免使用为HTML tags保留的名称（您有一个名为ContentObserver.onChange()的元素
习惯HTML5 - 这是当前的
构建您的HTML elements logically

注意：我不是在抨击你或你的学习经历，这比我的大多数第一批网站都要好，但我只是想让你走上正确的轨道去完成其余的开发工作更容易

在移动设备上停用水平滚动

1 个答案: