0

The scrollbar on my iframe will not stay visible. It appears when the iframe first loads, then fades away.

I have tried:

  • putting scrolling="yes" in iframe tag
  • adding overflow: -moz-scrollbars-vertical in css
  • adding overflow-y:scroll in css

None of these work. 

 #iframe {
        overflow: -moz-scrollbars-vertical !important;
        overflow-y:scroll;
    }

<iframe class="iframeclass" id="frame" src="" width="650" height="350" frameBorder="0" scrolling="yes"></iframe>

I think this is a Mac issue, since many Mac users disable the vertical scroll bar since they just use their trackpad. I tried the following (from this answer): 

.iframeclass::-webkit-scrollbar {
        -webkit-appearance: none;
    }

    .iframeclass::-webkit-scrollbar:vertical {
        width: 11px;
    }

    .iframeclass::-webkit-scrollbar:horizontal {
        height: 11px;
    }

    .iframeclass::-webkit-scrollbar-thumb {
        border-radius: 8px;
        border: 2px solid white; /* should match background, can't be transparent */
        background-color: rgba(0, 0, 0, .5);
    }

    .iframeclass::-webkit-scrollbar-track {
        background-color: #fff; 
        border-radius: 8px; 
    }

But still does not work.

Community
  • 1
  • 1
Cybernetic
  • 12,628
  • 16
  • 93
  • 132

1 Answers1

0

Check this:

<div class="scroll-wrapper">
<iframe src=""></iframe>


.scroll-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;

    /* important:  dimensions or positioning here! */
}

.scroll-wrapper iframe {
    /* nada! */
}

    .demo-iframe-holder {
  position: fixed; 
  right: 0; 
  bottom: 0; 
  left: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.demo-iframe-holder iframe {
  height: 100%;
  width: 100%;
}

This supports all browsers. Check Article for more info: Article

Sachin Kanungo
  • 1,054
  • 9
  • 17