質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

3290閲覧

CSSのみでiframeの2重のスクロールを回避したい

mojao_0227

総合スコア24

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/03/15 09:47

編集2018/03/15 11:21

###解決したいこと
iframeを使い、ECサイトの構築を行っています。
iframe領域から、下にスクロールする際は問題ありませんが、
tableの領域に入るとスクロールが二重になり、途中で上にスクロールすると、添付画像の様に
iframe/table両方の領域が見えてしまい、どちらもスクロールできてしまいます。

tableの領域で上スクロールする時にiframeはスクロールさせず、
可視範囲からtable領域が消えたらiframeをスクロールできれば良いと思っているのですが...

現状スクショ

cssのみ、もしくは子フレームのみのscriptを書くことで回避できる方法を探しています。
ご存知の方いらっしゃいましたらご教示頂けますと幸いです。

html

1<body style="overflow: hidden"> 2 <div id="pageBody"> 3 <div id="body_wrapper"> 4 <iframe id="body_template" scrolling="auto" src="/src/index.html" width="100%" height="100%" frameborder="0"> 5     <html> 6     <head></head> 7 <body class="onProduct"> 8 <main class="test_box" id="js-main"> 9 <div class="product-hero_container"> 10 <div class="product-hero_wrapper"></div> 11 </div> 12 <div class="productArticle"> 13 <section class="st-Lead_container"></section> 14 <section class="product_lists"> 15 <ul> 16 <li> 17 <div class="product-Block js-scroll-fade"> 18 <div class="product_images"></div> 19 </div> 20 </li> 21 <li> 22 <div class="product-Block js-scroll-fade"> 23 <div class="product_images"></div> 24 </div> 25 </li> 26 </ul> 27 </section> 28 <section class="section_base3"></section> 29 </div> 30 </main> 31 </body> 32 </html> 33 </iframe> 34 35 <table cellspacing="0" cellpadding="0" border="0" style="overflow:scroll"> 36 <tbody> 37 <tr> 38 <td> 39 <table cellspacing="0" cellpadding="0" border="0"> 40            <a href="image1"></a> 41 <a href="image2"></a> 42 <a href="image3"></a> 43          </table>  44 </td> 45 <td> 46 <table cellspacing="2" cellpadding="0" border="0"> 47 <tbody><tr><td>価格</td></tr></tbody> 48            <tbody><tr><td>名称</td></tr></tbody> 49 </table> 50 </td> 51 </tr> 52 </tbody> 53 </table> 54 </div> 55 </div> 56</body>

css

1body { 2 padding: 0; 3 margin: 0; 4} 5 6.product-hero_container{ 7 background-color: pink; 8 padding-bottom: 100vh; 9} 10 11.st-Lead_container { 12 background-color: aquamarine; 13 padding-bottom: 100vh; 14} 15 16.product_lists { 17 background-color: cornflowerblue; 18 padding-bottom: 100vh; 19} 20.section_base3 { 21 background-color: peachpuff; 22 padding-bottom: 100vh; 23} 24

備考://
下記3点を検討したのですが、いずれも不可でした。
・window.postMessage()で子フレームから親にiframeの高さを送る -> 親にscriptが書けず断念
・iframeのscrollingをnoにしてheightを調整していく -> さすがに現実的でない
・一番下までスクロールしたら、子フレームにoverflow:hiddenをつける -> スクロールアップで解除できない

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

defghi1977

2018/03/15 10:01

質問の詳細が全く読み取れません. 現状のスクリーンショット, どのようにしたいのかの詳細, 実際のHTMLコードを提示して下さい.
guest

回答1

0

ベストアンサー

残念ながらあなたの言わんとしていることを正確には読み取ることが出来ませんでした.

が, 次であると仮定して話を進めます.

  • 現在『メイン文書のスクロールバー』と『iframeで読み込んでいるサブ文書のスクロールバー』がスクリーン上に二つ同時に存在してしまっており, スクロール操作を行った際のスクロールの対象が不明瞭である. この問題をCSSもしくはサブ文書側のスクリプトを用いて解決したい.

この問題はiframe側のスクロールバーを無効化, つまり**iframeのサイズをサブ文書のサイズに合わせる**ことで解決します.

そこで, サブ文書が読み込み完了となったタイミングでサブ文書化からメイン文書のiframeを取得し, そのサイズをサブ文書のサイズに変更するスクリプトを考えました.

例を示します.

HTML

1<!--main.htm--> 2<!DOCTYPE html> 3<html> 4 <body> 5 <iframe src="sub.htm" width="100%" style="border: none;"></iframe> 6 <div>後続のコンテンツ</div> 7 </body> 8</html>

HTML

1<!--sub.htm--> 2<!DOCTYPE html> 3<html style="height: 2000px;"> 4<script> 5window.onload = e => { 6 //NOTE:セレクタは適宜指定するものとする 7 window.parent.document.querySelector("iframe").height 8 = document.documentElement.getBoundingClientRect().height; 9} 10</script> 11 <body style="background-color: yellow; margin: 0;"> 12 iframe内のコンテンツ 13 </body> 14</html>

なお, この手法が正しく動作するためには「メイン文書とサブ文書とが同じドメインに存在する(クロスドメインでのDOM操作は出来ない)」という厳しい条件が付いています.

投稿2018/03/15 12:32

defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問