在手机上禁用水平滚动

所以，我有一个网站here。我有一些使用jQuery在页面中移动的云。当您在手机上查看该页面时，问题就开始了。您可以滚动浏览实际页面并跟随云端。这并不难，很多人都注意到了这一点。 PC上没有问题，尽管曾经是。我禁用箭头键和空格键作为移动，所以你不能在PC上复制移动bug。如果有人可以帮助我，那很好，谢谢。在手机上禁用水平滚动

编辑：这是云的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(); 
});

来源

2016-02-06 plethorum

我发现很多问题喜欢这个。他们大多数都是封闭的，由于没有提供代码而被拒绝。 –

编辑添加代码 – plethorum

您的代码在Chrome和Firefox中可以使用。没有'水平滚动条'我找到了。 –

在看看你的网站，这是你如何解决当前的问题（这为出现在桌面浏览器）：

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

我会解释为什么这些规则每一个需要：在浏览器窗口的

width: 100%;百分之百
overflow: hidden当元件（如img）移动经过浏览器窗口的边缘（100％），这将是hidden
position: relative - 为此在.header或上述规则需要对body
height: auto您所设置的具有子元素扩大过去那种高度，如果你不这样做，你使用overflow: hidden元素的静态height，在.header内垂直件将不会被显示

重要的是要注意，这是一个创可贴修复了一个更大的问题;这个问题是你现在开发网站的方式。有事情等诸多问题，这里是一个简短的清单：

不裹在一个header元素
使用语义类的名字你的整个网站的内容，并且避免使用保留用于HTML tags名（你有一个名为.body
习惯的元素HTML5 - 这是当前
结构的HTML elements logically

备注：我不是抨击你或你的学习经历，这比我的大多数第一个网站更好，但我只是想让你走上正确的轨道，让其余的开发更容易

来源

2016-02-06 05:38:00 justinw

感谢您的全面回复。我很欣赏你提供这些链接并解释你的建议的时间。但是，我不明白你的意思是把我的网站封装在'header'元素中。你的意思是我把一切都放进身体标签里了吗？ – plethorum

@blackjackrobo是的，这就是jist - 你将所有的东西都包装在'.header'元素中，它不一定是个坏东西，因为它是一个'div'，但我会为元素使用更多的语义命名约定 - 因为它不是真正的'header'，而更像是'wrapper' - 如果你对我的意思有更多的细节感兴趣，请查看上面有关语义类名和HTML5元素的链接 - 我很高兴能够帮助你:) – justinw

在手机上禁用水平滚动

回答

相关问题