在一定宽度后防止水平滚动

Question

我正在制作一个顶部有大图片的网站，该网站延伸到页面的最右侧。问题是浏览器不断添加水平滚动条以允许用户滚动到此图像的末尾，但我不希望它这样做。

有什么方法可以告诉浏览器将图像看作有点像背景图像，或者只是在940px之后停止滚动？

http://www.electric-drumkit.com/404.php

有一个页面示例，以便您更好地了解我的意思。

Answer 1

这里的方法是：

• 添加新的div（或其他相关的HTML5代码，如果您愿意）：<div id="wrapper">，其中包含body内的所有内容。

• 将这些规则从body移至#wrapper：

  margin: 0 auto;
  position: relative;
  width: 960px;
  

• 添加这个新的CSS：

  body {
      min-width: 960px;
      overflow: hidden;
  }
  

• 当窗口小于960px宽时，添加此项以获得水平滚动：

  html {
      overflow: auto;
  }
  

这是一个live demo，因此您可以快速查看我的答案是否会产生预期效果。

在Firefox，Chrome，IE8中测试。

Answer 2

将图像放入这样的div中：

<div class="image"></div>

在CSS中你可以写：

.image {background: url(http://www.electric-drumkit.com/_images/_feat/404.png) bottom right no-repeat; height: 314px;}

通过这种方式，你的div会将图像作为背景渲染成div，我认为不会滚动。