删除垂直滚动条，在 Chrome 中的 iframe 中保留水平滚动条答案

【问题标题】：Remove vertical scroll bar, keep horizontal scroll bar in iframe in Chrome删除垂直滚动条，在 Chrome 中的 iframe 中保留水平滚动条
【发布时间】：2011-04-25 16:11:37
【问题描述】：

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

我的 iframe 样式如下：overflow-y:hidden; overflow-x:auto;

这在 FireFox 中运行良好，但在 Chrome 中却不行。有什么解决方法可以让它在 Chrome 中运行吗？

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

【问题讨论】：

Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar 的可能副本。两者都标记了 Chrome / webkit。

标签： iframe google-chrome scrollbar overflow

【解决方案1】：

如果你找不到其他东西：

将 iframe 的高度设置为 =>103%

看这里：

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

这是一种可行的解决方法......

你告诉我！

祝你好运

【讨论】：

太可惜了，我会寻找别的东西告诉你！！

【解决方案2】：

答案其实就在这里：

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

祝你好运！

【讨论】：

【解决方案3】：

这适用于任何浏览器

<!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>

【讨论】：

【解决方案4】：

像这样将父 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>

它将隐藏垂直滚动条，但用户仍然可以使用“page up”、“page down”和箭头键选项进行垂直滚动。

【讨论】：