iFrame Hide Scroll bars but still be able to scroll with mouse wheel
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.
Here is the 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
Does anyone have any ideas?
This should give you what you need to detect the mouse wheel movement: http://www.adomas.org/javascript-mouse-wheel/
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.
链接地址: http://www.djcxy.com/p/88114.html上一篇: 一个非常，非常非常大的div