1

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

Mahendra Gunawardena
  • 1,956
  • 5
  • 26
  • 45
user782104
  • 13,233
  • 55
  • 172
  • 312
  • Duplicate of http://stackoverflow.com/questions/9639649/jquery-window-scroll-event. The only difference is you use the iframe instead of the entire window. :-) PS: Scrollbars are just an optional thing for iframes.See this: http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll – Mark Manning Mar 29 '16 at 02:00
  • Possible duplicate of [Hide horizontal scrollbar on an iframe?](http://stackoverflow.com/questions/4856746/hide-horizontal-scrollbar-on-an-iframe) – mmativ Mar 29 '16 at 02:02

1 Answers1

0

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>
user782104
  • 13,233
  • 55
  • 172
  • 312
mmativ
  • 1,414
  • 14
  • 25
  • tested, add the scrolling="no" seamless="seamless" and the scroll bar is still exist, after that , I added the overflow:hidden at the html inside the iframe content removed the scrollbar, but not scrollable – user782104 Mar 29 '16 at 02:10