Menu
I have an iframe for which I would like to enable a horizontal scroll bar, but disable the vertical scroll bar.
I have the iframe styled as such: overflow-y:hidden; overflow-x:auto;
This works just fine in FireFox, but not Chrome. Is there any sort of workaround to get this to work in Chrome?
Update: I have transitioned into using a table cell with overflow, rather than an iframe. I don't know if this will make it easier or harder to work around that vertical scroll.
856
1. Set the overflow of the parent div as hidden. 2. Set the overflow of the child div to auto and the width 200% (or anything more than 100%, or more than the width of the parent - so that the scrollbar gets hidden).
Pressing the “FN + F11” key twice from your keyboard will fix this issue for you. 1.
To show the scrollbars always on the webpage, use overflow: scroll Property. It will add both horizontal and vertical scrollbars to the webpage. To add only horizontal scrollbar use overflow-x: scroll property and for vertical scrollbar use overflow-y: scroll property.
This works well in any browser
<!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>
The answer is actually here:
Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar
Good luck!!
196
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
