删除垂直滚动条,将水平滚动条保留在Chrome中的iframe中

时间:2010-10-14 21:58:15

标签: iframe google-chrome scrollbar overflow

我有一个iframe,我想启用水平滚动条,但禁用垂直滚动条。

我将iframe设为样式:overflow-y:hidden; overflow-x:auto;

这在FireFox中运行得很好,但不适用于Chrome。是否有任何解决方法可以让它在Chrome中运行?

更新的 我已经过渡到使用带溢出的表格单元格,而不是iframe。我不知道这是否会更容易或更难解决垂直滚动。

4 个答案:

答案 0 :(得分:7)

答案实际上就在这里:

Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar

祝你好运!!

答案 1 :(得分:2)

这适用于任何浏览器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
<title>Untitled 1</title> 
</head> 
<style type="text/css"> 
#test iframe { 
width: 100%; 
height: 100%; 
border: none; } 

#test { 
width: 100%; 
height: 3530px; 
padding: 0; 
overflow: hidden; } 

</style> 

<body style="margin:0;"> 
<div id="test"> 
<iframe src="http://stackoverflow.com/" scrolling="no">
</iframe> 
</div> 
</body> 
</html>

答案 2 :(得分:0)

如果你找不到别的东西:

将iframe的高度设为=&gt; 103%

见这里:

http://forums.aspfree.com/web-layout-43/horizontal-scrollbar-iframe-removing-23237-2.html

这种解决方法可能会起作用......

你告诉我!

祝你好运

答案 3 :(得分:0)

将父div元素添加到iframe,如下所示:

<div style='overflow: hidden; width: 600px; height: 400px;'>
    <iframe src='http://www.website.com/index.html' style='overflow-y: hidden;' width='580' height='400' frameborder='0' seamless='seamless'></iframe>
</div>

它会隐藏垂直滚动条,但用户仍然可以使用“页面向上”,“向下翻页”和箭头键选项进行垂直滚动。