iframeのスクロールを変更するには？

Question

https://www.seedlipdrinks.com/のデザイン構造をリメイク（http://dollarz.comli.com/testing/index2.html）しようとしています。

私はiframeを持つページを作成しました。しかし、iframeのスクロールに問題があります。これは、私がマッチさせようとしているデザインと似ていません。

私はスクロール= "いいえ"属性を使用しようとしましたが、スクロールが完全に無効になっています。

iframe内のコンテンツをスクロール可能にし、スクロールバーを非表示にします。それを行う方法はありますか？

Answer 1

あなたがリンクしたサイトは、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

Answer 2

あなたはoverflow: hiddenのスタイルであなたのiframeの周りにラッパーのdivを使用して、そのdivのより少しあなたのiframeの幅を設定することができます。

HTML：

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

CSS：

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

JSFiddle