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

###解決したいこと
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をつける　-> スクロールアップで解除できない

defghi1977

2018/03/15 10:01

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

現在『メイン文書のスクロールバー』と『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>