I'm embedding an iFrame in my webpage, and I want to hide the scrollbar while still allowing the content within the iFrame to be scrollable. I've tried several approaches but haven't had success. Here is my current code:
<div style="padding-bottom:56.25%; position:relative; display:block; width: 100%"><iframe width="100%" height="100%" src="https://hostingpillar.com/tools/" frameborder="0" allowfullscreen="" style="position:absolute; top:0; left: 0"></iframe></div>What I Tried and What I Expected:
Using CSS to hide the scrollbar:
iframe { overflow: hidden;}Expectation: This would hide the scrollbar but still allow the content to be scrollable.Result: The scrollbar was hidden, but the content was not scrollable.
Applying CSS directly to the content within the iFrame:
body { overflow: hidden;}Expectation: This would hide the scrollbar inside the iFrame but still allow the content to be scrollable.Result: No visible changes; the scrollbar remained visible.
Attempting to use JavaScript to manipulate the scrollbar visibility:
var iframe = document.getElementById('myIframe');iframe.contentWindow.document.body.style.overflow = 'hidden';Expectation: This would programmatically hide the scrollbar but still allow the content to be scrollable.Result: The JavaScript approach didn't work, possibly due to cross-origin restrictions.
Additional Information:
- The iFrame content comes from a different domain (cross-origin).
- I'm working within a WordPress environment if that impacts the solution.
Despite these attempts, I can't achieve the desired behavior. The scrollbar either remains visible or the content is not scrollable.
Could anyone provide a solution or point out what I'm doing wrong? I'm open to using JavaScript or CSS to achieve this.
Any help would be greatly appreciated!