溢出-x：隱藏仍然可以滾動
[英]overflow-x:hidden still can scroll
問題描述
問題是：
我有一個全寬欄菜單，它是通過在右側和左側創建一個大邊距來制作的。 這個邊距應該由overflow-x: hidden裁剪，它是......沒有滾動條，一切（視覺上）都可以......
但是，如果您拖動頁面（使用 Mac Lion）或向右滾動，頁面會顯示一個巨大的欄，它應該被overflow-x:hidden裁剪掉。
CSS
html {
margin:0;
padding:0;
overflow-x:hidden;
}
body {
margin: 0 auto;
width: 950px;
}
.full, .f_right {
margin-right: -3000px !important;
padding-right: 3000px !important;
}
.full, .f_left {
margin-left: -3000px !important;
padding-left: 3000px !important;
}
這是一個鏈接： http : //jsfiddle.net/NicosKaralis/PcLed/1/
你必須在草稿中打開才能看到...... jsfiddle css 以某種方式使它工作。
@克拉澤
我有這樣的結構：
body
div#container
div#menu_bar
div#links
div#full_bar
div#content_body
...
#container 是一個居中的 div，固定寬度為 950px，#full_bar 是一個在整個窗口上從一側延伸到另一側的條形
如果我將寬度 100% 放在 #full_bar 中，它將僅獲得內部寬度而不是窗口外的寬度
10 個解決方案
解決方案1
127 2012-10-22 20:47:56
我有這個完全相同的問題。 我通過放置overflow-x: hidden;解決了它overflow-x: hidden; 在雙方body和html 。
html { margin: 0 auto; padding: 0; overflow-x: hidden; } body { margin: 0 auto; overflow-x: hidden; width: 950px; } .full { background: red; color: white; margin-right: -3000px !important; margin-left: -3000px !important; padding-right: 3000px !important; padding-left: 3000px !important; }
<div> <div class="full"> abc </div> </div>
解決方案2
42 2014-12-23 01:22:02
還有另一種方法可以用一行代碼解決這個問題：
body {
/* All your regular code including overflow-x: hidden; */
position:relative;
}
這解決了我在 webkit (Mac) 上的問題
參考： http : //www.tonylea.com/2010/safari-overflow-hidden-problem/
解決方案3
10 2014-04-16 00:27:21
html, body { overflow-x: hidden; width: 100%; }
為我解決了這個問題，除了 IE - 如果您努力這樣做，您仍然可以將站點向右拖動。
使用overflow: hidden; 刪除垂直滾動條，所以這不是解決方案。
我無法使用 JavaScript 找到更好的解決方案。
解決方案4
7 2013-10-08 19:49:10
我在這里找到了解決方案https://stackoverflow.com/a/9399429/622041
你必須把#wrapper圍繞您的內容。 overflow:hidden在body不起作用。
#wrapper {position: absolute; width: 100%; overflow-x: hidden}
這里是 HTML：
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div class="yourContent"> ... </div>
</div>
</body>
</html>
解決方案5
6 已采納 2011-12-27 01:27:26
我認為沒有任何方法可以在不使用 JavaScript 的情況下防止元素滾動。 但是，使用 JS，將 scrollLeft 設置為 0 onscroll 非常容易。
解決方案6
3 2013-04-30 06:16:48
來自 Weaver 的 Offcanvas 演示http://jasonweaver.name/lab/offcanvas/
用以下內容包裝內容：
width: 100%;
overflow: hidden;
這僅限制了寬度，並且在類似情況下也可以防止拖動時滾動。
解決方案7
2 2013-08-06 09:26:55
嘗試固定位置 html 元素，但這會禁用雙向滾動。
html {
position: fixed;
}
解決方案8
1 2013-11-27 00:25:45
<body>和<html>標簽上的溢出也對我有用。
解決方案9
0 2011-12-26 16:09:38
如何設置內容正文的寬度，並圍繞#menu_bar和#content_body扭曲#container ？
body
div#container
div#menu_bar (absolute positioned)
div#links
div#full_bar
div#content_body (relative positioned + padding [#menu_bar height])
...
解決方案10
-1 2011-12-26 13:30:07
考慮對 html 使用 max-width。
如果它不起作用，請通知我。
帶有溢出-x 內容的 iframe 的水平滾動條：隱藏
[英]Horizontal scroll bar for iframe with content that has overflow-x: hidden
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.