How to Hide Scrollbar in an iFrame While Maintaining Scroll Functionality?

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:

1. 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.

2. 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.

3. 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!