Question

我正在尝试重拍（http://dollarz.comli.com/testing/index2.html）https://www.seedlipdrinks.com/的设计结构。

所以我创建了一个包含iframe的页面。但我对iframe滚动有问题，它与我想要匹配的设计不相似。

我尝试过使用 scrolling =＆＃34; no＆＃34; 属性，但它完全禁用了滚动条。

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

Answer 1

您链接的网站不使用iframe或任何类型的滚动容器。它基本上有一个不透明的＆amp;固定标题＆amp;页脚+主要内容的边距。这使得网站看起来包含在矩形中，同时保留了使用窗口滚动条滚动的功能。以下是复制效果的方法：

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

Answer 2

您可以在iframe中使用overflow: hidden样式的包装div，并将iframe宽度设置为比该div更多。

HTML：

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

CSS：

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

JSFiddle

如何修改iframe滚动？

2 个答案: