禁用水平滾動條，因爲DIV的位置：絕對在頁面之外

我有一個絕對定位的元素，它位於頁面的「外部」，但我希望瀏覽器（我使用Firefox 3）不顯示水平滾動條。似乎顯示位於左側的div（例如，具有「left：-20px」）是可以的，並且不顯示滾動條。然而，右邊的相同的東西（「right：-20px」）總是顯示滾動條。是否可以隱藏滾動條，但保持標準滾動可能？我的意思是我只想禁用由於這個絕對定位的元素的滾動，但由於其他元素（我知道我可以完全禁用滾動條，這不是我想要的）繼續滾動。禁用水平滾動條，因爲DIV的位置：絕對在頁面之外

<!DOCTYPE html> 
<html> 
<body> 
    <div id="el1" style="position: absolute; top: 0; background-color: yellow; left: -20px;"> 
    element 
    </div> 
    <div id="el2" style="position: absolute; top: 0; background-color: yellow; right: -20px;"> 
    element 
    </div> 
    <h1>Hello</h1> 
    <p>world</p> 
</body> 
</html>

來源

2011-05-24 Tom

不是沒有hacky javascripts。 – jantimon 2011-05-24 14:22:46

如果你找到了你的答案，你可以用支票標記嗎？ – Vap0r 2011-06-15 14:20:17

@ Vap0r對不起...我是在錯誤的線程...大聲笑...有這麼多的問題打開，我認爲這是我的！（是的，我是個白癡！:)） – TimFoolery 2011-06-15 14:40:22

是的，有可能在您的html標籤上輸入style="overflow-x: hidden"。這將這樣的伎倆......

來源

2011-05-24 14:34:27 Vap0r

+23

具體地說，他不想關閉滾動，只是不希望特定的元素來滾動滾動條。所以不幸的是，這並不能解決問題。 – 2012-09-28 03:25:48

不太清楚這是否會幫助，但你可以嘗試改變造型對於所提到的div這個來代替：

<div id="el1" style="position:fixed; left:-20px; top:0; background-color:yellow; z-index:-1">element</div> 

<div id="el2" style="position:fixed; left:20px; top:0; background-color:yellow; z-index:-1">element</div>

通過設置位置，而不是固定的，它會將指定的div「鎖定」到位，而其餘內容仍然可以滾動。當然，這是假設其中的內容的其餘部分被z-index疊加在定義的div之上。

希望這會有所幫助。

來源

2011-06-12 18:37:12 vynx

添加到您的CSS：

div { 
overflow-x:hidden; 
overflow-y:hidden; 
}

溢出-X和-Y的風格不被IE認可。所以，如果你只關心Firefox 3，這將工作得很好。否則，你可以使用一些javascript：

document.documentElement.style.overflow = 'hidden'; // firefox, chrome 
document.body.scroll = "no"; // ie only

來源

2011-06-12 19:03:25

，你所要做的是添加你的div之外的包裝。

這裏是CSS：我把我的班 'main_body_container'

.main_body_container { 
    min-width: 1005px; /* your desired width */ 
    max-width: 100%; 
    position: relative; 
    overflow-x: hidden; 
    overflow-y: hidden; 
}

希望它能幫助:)

更新

創建一支筆吧，看它here

來源

2011-11-24 04:12:22 edwardmagbago

這樣一個簡單的解決方案。日Thnx！ – 2013-11-20 01:33:43

這是正確的答案，不錯的工作人 – axelhzf 2013-12-07 08:30:18

這實際上可以使用直接的CSS來完成，而不會對頁面寬度等有任何限制

創建與絕對定位在頁面的左上角隱藏溢出一個div：它可以這樣做。使它的寬度和高度100％
創建另一個的div是一樣的，但沒有隱藏溢出
添加類的div是迴繞時創建的內容，使得其相對位置，並給予它任何寬度你想要主頁面內容有
在每個創建的div中添加該類的內容。

您的第一個div中的內容將與第二個div的內容保持正確對齊，但超出窗口邊界的任何內容都將被截斷。

這裏有一個工作的例子，保持圖像相對於內容的其餘部分的固定位置，而無需使用任何JavaScript：

#widthfitter { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
#contentWrapper { 
 
    width: 100%; 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.content { 
 
    width: 600px; 
 
    position: relative; 
 
    text-align: left; 
 
    margin: auto; 
 
}

<div id="widthfitter"> 
 
    <div class="content"> 
 
    <img src="https://i.stack.imgur.com/U5V5x.png" style="position:absolute; top: 240px; left: 360px" /> 
 
    </div> 
 
</div> 
 
<div id="contentWrapper"> 
 
    <div class="content"> 
 
    Tested successfully on: 
 
    <ul> 
 
     <li>IE 8.0.6001.18702IS</li> 
 
     <li>Google Chrome 17.0.963.46 beta</li> 
 
     <li>Opera 10.10</li> 
 
     <li>Konqueror 4.7.4</li> 
 
     <li>Safari 5.1.5</li> 
 
     <li>Firefox 10.0</li> 
 
    </ul> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip 
 
     ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit 
 
     augue duis dolore te feugait nulla facilisi. 
 
    </p> 
 
    </div> 
 
</div>

來源

2012-04-19 15:54:14

不錯的工作，這項工作 – 2012-10-08 03:07:39

這確實工作可愛，謝謝你的解決方案。 – klaar 2016-06-01 15:13:45

我能夠解決這個問題將元素的位置屬性更改爲固定：

position：fixed;

沒有更多的水平滾動由此元素引起，但仍然由其他元素引起的水平滾動。

來源

2015-04-22 10:53:23

把下面的風格

html {overflow-x:hidden;}

我測試了IE 8，FF和鉻。

來源

2015-09-11 09:56:32 sudip

禁用水平滾動條，因爲DIV的位置：絕對在頁面之外

回答

相關問題