iFrame隐藏滚动条，但仍然可以使用鼠标滚轮滚动 [英] iFrame Hide Scroll bars but still be able to scroll with mouse wheel

问题描述

我想要做的是做一个iPhone模拟器，只在iFrame中显示一个网页。

What I am trying to do is make an iPhone simulator and just have a web page display in an iFrame. The scrollbars are taking up too much room so I want to hide them but still have the ability to scroll.

这是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; }

现在它运行良好，滚动条被隐藏，但是我不能滚动。我可以使用我的箭头键，它工作正常，但我真的想要使用鼠标滚轮的能力

Right now it's working good, the scrollbars are hidden but I cannot scroll. I can use my Arrow keys and it works fine, but I really want the ability to use the mouse wheel

有没有任何想法？

推荐答案

这将给你需要检测鼠标滚轮移动： http://www.adomas.org/javascript-mouse-wheel/

This should give you what you need to detect the mouse wheel movement: http://www.adomas.org/javascript-mouse-wheel/

这应该给你您需要控制页面的滚动：
http：// www.mediacollege.com/internet/javascript/page/scroll.html

And this should give you what you need to control the scrolling of the page: http://www.mediacollege.com/internet/javascript/page/scroll.html

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

Detect mouse wheel, determine the direction, scroll accordingly.

这篇关于iFrame隐藏滚动条，但仍然可以使用鼠标滚轮滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！