Question

基本上，我有一些超宽的元素，看起来好像它们是从屏幕的右侧出来的。然后我在正文上使用overflow-x: hidden;来隐藏溢出，但这并不会阻止页面在用户使用触控板时水平滚动，或者单击并将鼠标拖动到右侧。

网站流畅，因此设置overflow-x: hidden;不是问题，但必须在body / html标记上设置，而不是在内容包装上设置，因为会破坏设计。

我也在使用这个jQuery代码段来尝试和帮助：

(function($) {
    $(window).scroll( function() {
        $(window).scrollLeft(0);
    });
})(jQuery);

我过去曾成功使用过它，但在这种情况下我似乎无法使用它。这是一个jsFiddle，显示上面的代码片段在一个简化的测试用例中工作：http://jsfiddle.net/joshnh/pqpzN/

有什么建议吗？

P.S。它的行为与iOS上的一样。

更新：我想我已经设法让jQuery片段通过触摸板停止水平滚动，但点击和拖动仍然有效（我无法解释，因为测试用例停止点击和拖动，因为它应该是在我的网站上做。）

Answer 1

我已修改此问题：

body,
html {
    overflow-x: hidden;
    width: 100%;
}

对此：

html {
    overflow-x: hidden;
    width: 100%;
}

导致问题的是body元素overflow-x: hidden;。

Answer 2

看起来它对我有用。（无论我对页面做了什么，我都没有看到水平滚动条。）我认为overflow-x是正确的解决方案，你不应该需要JavaScript来做到这一点。我会使用html { overflow-x:hidden }，但看起来你已经在做了。我要做的第一件事就是在html5.validator.nu验证页面并修复“连续两个连字符”错误。

Answer 3

我没有看到水平滚动条，但是我能够在鼠标滚轮上使用滑动侧面功能并观看屏幕移动。看起来您的主要内容元素设置为适合屏幕的大小，但标题和section-title中的图像将继续重复。我不确定你是如何定义你的CSS的，但它可能就像在标题中应用宽度以使其停止一样简单。

您的<header class="clearfix" role="banner">和<h1 class="section-title">About Me</h1>似乎是罪魁祸首。使用css限制其宽度应该可以解决问题。

Answer 4

建议1

将最大宽度应用于body。像这样：

body
{
    max-width:   100%;
    margin:    0 auto;
    overflow: visible;
}

我在Chrome和IE9上测试过，我注意到的唯一问题就是跳跃。

Answer 5

什么不适合你为我工作。我使用下面的代码，它工作。

body,
html {
    overflow-x: hidden;
    width: 100%;
}

当我尝试时：

html {
    overflow-x: hidden;
    width: 100%;
}

它不起作用。

如何阻止用户在我的网站上水平滚动

5 个答案:

建议1