禁用水平滚动条，因为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的位置：绝对在页面之外

回答

相关问题