如何在Google Chrome中隐藏iframe右侧的栏

Question

我正在为餐馆网站开发订购食品小部件（请参阅下面的附图）。我使用iframe来显示带有滚动功能的菜单。我已经隐藏了CSS中的滚动条。但奇怪的是，右侧有一个条形图，我不知道它是什么。此外，此栏仅在Windows Chrome中显示，而不在Safari中的Mac chrome中显示。

Answer 1

要删除边框，请使用以下内容。

<iframe src="myURL" width="500" height="500" frameBorder="0">Browser not compatible.</iframe>

Answer 2

试试这个scrolling="no"或seamless="seamless"。

<iframe src="..." 
    class="foo" 
    scrolling="no" 
    seamless="seamless">
</iframe>

Answer 3

这里唯一的回顾就是你必须在IFrame之外使用Div容器。

在android和ios Device中测试。

HTML

   <div class="outerCon">
    <iframe src="https://bing.com" 
            class="foo" 
            seamless="seamless">
    </iframe>
    </div>

<强> CSS

.outerCon{
    overflow:hidden;
    height:500px;
    width:600px;
}

.outerCon iframe{
    width:inherit;
    height:inherit:
   overflow-x : hidden;
    overflow-y: scroll;
}

.outerCon iframe::-webkit-scrollbar {
 display: none;
}

DEMO