防止一定寬度後的水平滾動

Question

我正在製作一個網站，其頂部有一個大圖片，延伸到頁面的最右側。問題在於瀏覽器不斷添加水平滾動條以允許用戶滾動到該圖像的末尾，但我不希望它做到這一點。

有沒有什麼辦法可以告訴瀏覽器將圖像處理爲背景圖像，或者在940像素後停止滾動？

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，我認爲不會有滾動。