Menu
I have an iframe on www.example.com that points to support.example.com (which is a CNAME to a foreign domain).
I automatically resize the height of my iframe so that the frame will not need any scrollbars to display the contained webpage.
On Firefox and IE this works great, there is no scrollbar since I use <iframe ... scrolling="no"></iframe>. However, on webkit browsers (Safari and Chrome), the vertical scrollbar persists even when there is sufficient room for the page without the scrollbar (the scrollbar is grayed out).
How do I hide the scrollbar for webkit browsers?
232
1) Set the scrolling attribute of the iframe to no (scrolling="no"). This will disable both horizontal and vertical scroll bars.
To hide the scrollbar from Chrome, Safari, Edge, and Opera, you can use the pseudo-element selector :-webkit-scrollbar and set the display property to none .
To hide the vertical scrollbar and prevent vertical scrolling, use overflow-y: hidden like so: HTML. CSS.
I just ran into this problem, and discovered that the fix was to set overflow: hidden on the HTML tag of the page inside the iframe.
65
You can hide the scrollbars and maintain the scrolling functionality (by touchpad or scroll wheel, or touch and drag in a mobile phone or tablet, by using:
<style> iframe::-webkit-scrollbar { display: none; } </style> Obviously, you can change iframe to whatever fits your design, and you can add the equivalent -mozilla- property to get it work in firefox as well.
32
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
