如何修改iframe滚动

How to modify iframe scroll?

本文关键字：iframe 滚动 修改 何修改      更新时间：2023-09-26

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

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

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

我希望iframe内的内容是可滚动的，滚动条应该隐藏。有什么办法吗?

您链接的站点没有使用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

您可以在您的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

相关文章：