Hide scrollbar in iframe, while still scrolling
scrolling="no"
and
display:none
Will stop the iFrame from scrolling. The only other solution is to "hide" the scrollbar via overlapping.
<div style="width: 400px; overflow: hidden">
<iframe src="https://fr.wikipedia.org/wiki/Main_Page" width="407"height="480">
</div>
Note the 7 pixel difference between the parent div and the iframe, this effectively cuts off a portion of the iframe so that the scrollbar is hidden but you are still able to scroll.
How do you get rid of all scrollbars in an iframe in Safari/webkit?
Use overflow:hidden on the included body.
Hide vertical scrollbar on browsers but making it still working
Do you want to show horizontal scrollbar and hide vertical scrollbar but making both working? If so, you can refer to the code below:
.content {
width: 400px;
height: 200px;
}
.container {
overflow-x: auto;
overflow-y: auto;
height: 100px;
width: 200px;
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* Internet Explorer 10+ */
}
.container::-webkit-scrollbar {
height: 8px;
width: 0px;
border: 1px solid #fff;
}
::-webkit-scrollbar-track {
border-radius: 0;
background: #eeeeee;
}
::-webkit-scrollbar-thumb {
border-radius: 0;
background: #b0b0b0;
}
<div class="container">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
Remove vertical scroll bar, keep horizontal scroll bar in iframe in Chrome
The answer is actually here:
Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar
Good luck!!
overflow: hidden; doesn't work on Chrome with IFRAMEs?
Right, how about:
<iframe scrolling="no" src="http://www.google.com" width="400px" height="300"></iframe>
as in the scrolling="no"
http://jsfiddle.net/neSBS/
Related Topics
What Does A[Href^="..."] Do in Css
Invalid CSS Selector Causes Rule to Be Dropped: What Is the Rationale
Every Item to Have the Same Width as the Widest Element
How Does Border-Image Work With Linear-Gradient
Should I Use 'Border: None' or 'Border: 0'
Difference Between Background and Background-Color
How to Reset/Remove Chrome'S Input Highlighting/Focus Border
Changing :Hover to Touch/Click For Mobile Devices
Is !Important Bad For Performance
Add Line Break to ::After or ::Before Pseudo-Element Content
Search Input With an Icon Bootstrap
Segments in a Circle Using CSS3
@Font-Face Src: Local - How to Use the Local Font If the User Already Has It
Bootstrap Dropdowns Menus Appearing Behind Other Elements - IE7
Css: Styled a Checkbox to Look Like a Button, Is There a Hover