How to hide the scroll bar while the content is scrollable?

There is an iframe, where the content in it is scrollable, however, since the iframe is inside body and there are two vertical slide bar, I would like to hide the iframe one.

<iframe id="pillar_frame" src="/hongkong/pick_a_class/main" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe> 

Since there is no scrollbar, I would like to :

  1. Can scroll by mouse wheel
  2. Can scroll on mobile / tablet

How can hide the bar while maintain the scroll function using JS/ Jquery stuff? Thanks a lot

Answers 1

  • this is the answer from same question.

    .foo {
      width: 200px;
      height: 200px;
      overflow-y: hidden;
    }
    <iframe src="http://www.google.com" 
            class="foo"
            id="pillar_frame"
            scrolling="no" 
            seamless="seamless">
    </iframe>


Related Articles