Iframe without scrollbar.

[Hyperactive]

I have iframe in my page. How can i make iframe without scrollbar, but i can
scroll iframe content with mousewheel? How can i do that?

Waiting for answers. ;)

[BLiZZaRD]

In your iframe CSS:



body {
overflow: hidden;
}

[codeexploiter]

You need to remember one thing before you make the scrollbars of your iframe hidden. The overflow property works along with the height and width of the your iframe element.

For example if you have a iframe whose width is 900px and height is 800px then the iframe will display the its content based on that dimensions the data that comes beyond the dimension will not be displayed.

If you are looking for disabling either horizontal or vertical scrollbar then you can use overflow-x or overflow-y properties.

[jscheuer1]

The style overflow:hidden works differently in different browsers. Some will still allow you to scroll the area (with mousewheel or keyboard) if there is additional unseen content, others will simply not display it.

[jscheuer1]

After a bit of checking, overflow:hidden (applied to the iframe) seems to only work to remove scroll bars in some browsers. The attribute scrolling="no" is a better choice. However, once you get rid of the scrollbars, most browsers will not allow you to scroll the iframe using the mouse wheel. IE will not allow it at all, FF allows it using the arrow keys, Opera allows it using the keys or wheel.

Using overflow:hidden on the body of the page inside the iframe only gets rid of the horizontal scroll bar in IE. Horizontal scrolling cannot be done in that browser. It gets rid of both scroll bars in Opera and FF, and the ability to scroll is the same in those browsers as in the above paragraph.

Using just HTML, I don't believe there is any way to have "iframe without scrollbar, but i can scroll iframe content with mousewheel".

I'm not even too confident that it can be done using javascript.

[BLiZZaRD]

There's always Flash :D

[jscheuer1]

After a bit of Googling, I found this script:

http://adomas.org/javascript-mouse-wheel/

With just a bit of modification (red):


<script type="text/javascript">
/** This is high-level function.
* It must react to delta being more/less than zero.
*/
function handle(delta) {
var d=delta*-10;
window.scrollBy(0,d);
}

/** Event handler for mouse wheel event.
*/
function wheel(event){
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta/120;
/** In Opera 9, delta differs in sign as compared to IE.
*/
if (window.opera)
delta = -delta;
} else if (event.detail) { /** Mozilla case. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
delta = -event.detail/3;
}
/** If delta is nonzero, handle it.
* Basically, delta is now positive if wheel was scrolled up,
* and negative, if wheel was scrolled down.
*/
if (delta)
handle(delta);
/** Prevent default actions caused by mouse wheel.
* That might be ugly, but we handle scrolls somehow
* anyway, so don't bother here..
*/
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
}

/** Initialization code.
* If you use your own event management code, change it as required.
*/
if (window.addEventListener)
/** DOMMouseScroll is for mozilla. */
window.addEventListener('DOMMouseScroll', wheel, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;
</script>

and placed in the head of the page in the iframe, will do the trick.

No style is required on either page, to eliminate the scroll bars on the iframe, set its scrolling attribute to no:


<iframe src="big_page.htm" width="300" height="300" scrolling="no" frameborder="1"></iframe>

[paddyirishman05]

and placed in the head of the page in the iframe, will do the trick.

Is there a way to do this if the page in the iFrame is not my own?