如何修改iframe滚动？

Question

I'm trying remake ( http://dollarz.comli.com/testing/index2.html ) the design structure of https://www.seedlipdrinks.com/ .

So I created a page with an iframe. But I've a problem with iframe scroll, it's not similar to the design that I'm trying to match.

I've tried using scrolling="no" attribute, but it's totally disabling the scroll.

I want the content inside iframe to be scrollable and the scroll bar should be hidden. Is there any way to do that?

Answer 1

The site you linked does not use an iframe or any sort of scrolling container. It essentially has an opaque & fixed header & footer + margins for the main content. This is what make the site look contained in a rectangle, while preserving the ability to scroll using the window scroll bar. Here's how you can replicate the effect:

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

You can use a wrapper div around your iframe with style of overflow: hidden , and set your iframe width a little more than that div.

HTML :

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

CSS:

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

JSFiddle