css - 始终显示 iframe 垂直滚动条

Question

我的 iframe 上的滚动条将不可见。它在 iframe 首次加载时出现，然后消失。

我试过:

• 将 scrolling="yes"放在 iframe 标签中
• 在 css 中添加 overflow: -moz-scrollbars-vertical
• 在 css 中添加 overflow-y:scroll

这些都不起作用。

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

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

我认为这是一个 Mac 问题，因为许多 Mac 用户禁用垂直滚动条，因为他们只是使用触控板。我尝试了以下(来自 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; 
    }

但是还是不行。

Answer 1

检查这个:

<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%;
}

这支持所有浏览器。 查看文章了解更多信息:Article