如何修改iframe滚动？

我试图重拍（http://dollarz.comli.com/testing/index2.html）https://www.seedlipdrinks.com/的设计结构。如何修改iframe滚动？

所以我创建了一个iframe页面。但是我有一个iframe滚动问题，它与我试图匹配的设计不相似。

我试过使用scrolling =“no”属性，但它完全禁用了滚动。

我希望iframe中的内容可以滚动，并且应该隐藏滚动条。有没有办法做到这一点？

来源

2016-08-20 Sai

是否要允许滚动和隐藏滚动条？ –

@MahmoodKohansal是的。 – Sai

我发表了一个答案。 –

您链接的网站不使用iframe或任何类型的滚动容器。它基本上具有不透明的&固定标题&页脚+主要内容的页边距。这就是让网站看起来包含在矩形中，同时保留使用窗口滚动条进行滚动的功能。这里是你如何复制效果：

body { 
    background-color: white; 
} 

header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 50px; 
    background-color: white; 
} 

section { 
    padding: 50px 0; /* So the header/footer doesn't overlap the content */ 
    background-color: #7fff7f; 
    margin: 0 50px; 
} 

footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 50px; 
    background-color: white; 
}

Demo here

来源

2016-08-20 20:49:21 Jacob

这似乎是比使用iframe更好的选择。 – Sai

但问题是，如果我将标题的高度设置为100％，它占用了整个空间并且其他内容（如页脚）未显示。以下是它现在的样子（header -90vh，footer-10vh） - http://dollarz.comli.com/scroll/index3.html。使用iframe - http://dollarz.comli.com/scroll/index2.html。 – Sai

为什么要将标题的高度设置为100％？ – Jacob

您可以使用一个包装格在你的iframe与overflow: hidden风格，并设置iframe的宽度比格多一点。

HTML：

<div style="overflow: hidden"> 
    <iframe src='http://dollarz.comli.com/testing/index.html'></iframe> 
</div>

CSS：

iframe { 
    width: 103%; 
    height: 100%; 
}

JSFiddle

来源

2016-08-20 20:57:32

酷招。唯一的缺点是我们不能使用窗口滚动来滚动iframe的内容。 http://dollarz.comli.com/scroll/index2.html – Sai

不幸的是你是对的。此外，您通过检查有用答案的确认将帮助其他用户像您一样提出这个问题。 –

如何修改iframe滚动？

回答

相关问题