13

这是网站：http: //joshnh.com/

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

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

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

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

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

有什么建议么？

PS 它在 iOS 上的行为应如此。

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

4

5 回答 5

11

I have fixed the issue by changing this:

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

To this:

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

It was overflow-x: hidden; on the body element that was causing the problem.

于 2012-11-27T22:15:02.513 回答
0

对你没用的东西对我有用。我使用了下面的代码并且它有效。

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

当我尝试时：

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

它没有用。

于 2015-03-31T15:28:23.413 回答
0

建议一

将最大宽度应用于body. 像这样的东西：

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

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

于 2012-11-27T16:41:56.500 回答
0

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

于 2012-11-23T03:53:07.780 回答
0

我没有看到水平滚动条，但我可以使用鼠标滚轮上的侧向滑动功能并观察屏幕移动。看起来您的主要内容元素已设置为适合屏幕的大小，但您的标题和部分标题中的图像将永远重复。我不确定你是如何定义你的css的，但它可能就像在你的标题上应用一个宽度以让它停止一样简单。

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

于 2012-11-23T04:04:56.987 回答