iFrame 隐藏滚动条，但仍然可以使用鼠标滚轮滚动答案

【问题标题】：iFrame Hide Scroll bars but still be able to scroll with mouse wheeliFrame 隐藏滚动条，但仍然可以使用鼠标滚轮滚动
【发布时间】：2011-09-14 00:24:39
【问题描述】：

我想做的是制作一个 iPhone 模拟器，并在 iFrame 中显示一个网页。滚动条占用了太多空间，所以我想隐藏它们，但仍然可以滚动。

这是 HTML：

<div id="iphone">
    <iframe src="http://site.com" width="307" height="443"><p>Your Browser does not support iFrames.</p></iframe>
</div>

CSS：

#iphone { background:url(iPhone.png) no-repeat; width:368px; height:706px; position:relative; overflow:hidden;  }
#iphone iframe { position:absolute; left:30px; top:143px; border:0;overflow:hidden; }

现在它运行良好，滚动条被隐藏但我无法滚动。我可以使用箭头键，而且效果很好，但我真的希望能够使用鼠标滚轮

有人有什么想法吗？

【问题讨论】：

标签： html css iframe

【解决方案1】：

这应该为您提供检测鼠标滚轮移动所需的内容：http://www.adomas.org/javascript-mouse-wheel/

这应该为您提供控制页面滚动所需的内容： http://www.mediacollege.com/internet/javascript/page/scroll.html

检测鼠标滚轮，确定方向，相应滚动。

【讨论】：