Question

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

我试过了：

在iframe标记中添加scrolling =“yes”
在css中添加溢出：-moz-scrollbars-vertical
添加overflow-y：在css中滚动

这些都不起作用。

 #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

始终显示iframe垂直滚动条

1 个答案: