I bet you’re reading this because, for the past you-say-how-many-minutes, you’ve been trying to figure out how on earth to disable scrolling on an iframe.
This is a good question and, as you’ve probably experienced firsthand, a tough one to solve.
An <iframe> provides you with an easy way to embed third-party content on a web page. However, if you’re embedding content from a domain different than your own (which is usually the case), you can’t style that content because of Cross-Origin Resource Sharing (CORS) restrictions.
This leads to quite a few “How do I do this or that with an iframe?” dilemmas. How to prevent scrolling in an iframe, the dilemma you came here to get help with, is by far one of the most common one of them.
So let’s get into it and help you solve it.
How to Disable Scrolling on an <iframe>
Add the scrolling="no" attribute to the <iframe> element to prevent users from scrolling on an iframe, both horizontally and vertically.
<iframe src="#" scrolling="no" />Although the W3C Validator reports the scrolling="no" attribute as obsolete and recommends using CSS instead, this is still the solution that can help you disable scrolling on most browsers.
Just in case a future version of a popular browser drops support for the scrolling="no" attribute, you may want to add an overflow: hidden CSS declaration to your <iframe> element’s style attribute, too.
<iframe src="#" scrolling="no" style="overflow:hidden" />As you look for solutions for this problem on the Internet, you will come across some people recommending the use of the seamless attribute.
That attribute, however, has been dropped from the HTML5 specification and is no longer supported by web browsers, so there’s no sense in adding it to your HTML markup as the only thing you will be adding to your code is bloat.
In Conclusion
Now you know how to disable scrolling on an <iframe> by adding the scrolling="no" and style="overflow:hidden" attributes to the HTML markup.
If the above solution doesn’t remove the scrollbar from your iframe, then the scrollbar is probably coming from the embedded document, and not the <iframe> element in your document.
And in such a case, the only solution is to edit the CSS of the embedded document if you can.
