始终显示 iframe 垂直滚动条答案

【问题标题】：Always show iframe vertical scrollbar始终显示 iframe 垂直滚动条
【发布时间】：2015-09-07 18:56:35
【问题描述】：

我的 iframe 上的滚动条不会保持可见。它在 iframe 第一次加载时出现，然后消失。

我试过了：

在 iframe 标记中添加 scrolling="yes"
在 css 中添加溢出：-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; 
    }

但还是不行。

【问题讨论】：

你能提供你的代码吗？
css sn-p 与 -webkit-scrollbar 一起工作对我来说就像一个魅力

标签： css iframe scrollbar

【解决方案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

【讨论】：

不，它仍然会消失。这是在使用 Safari 的 Mac 上。