在 iframe 中隐藏滚动条，同时仍在滚动

Question

Is there a way to hide a vertical scrollbar in an iFrame, but with still enabling scrolling?

Only thing that hides the scrollbars in HTML5 for me is setting scrolling="no", but this locks the scrolls. All i want to do is hide them.

 <iframe width="100%" scrolling="no" src=""></iframe>

Answer 1

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.

Answer 2

You can achieve this by putting this in your css file: iframe { overflow:hidden; } iframe { overflow:hidden; }

Answer 3

Try this, it will work

<div style='width: 500px; height: 120px; overflow: hidden;'>

    <iframe style='width: 518px; height: 120px;' src=''></iframe>

</div>