teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

画像とコードの追加

2018/03/15 11:21

投稿

mojao_0227
mojao_0227

スコア24

title CHANGED
@@ -1,1 +1,1 @@
1
- CSSのみでiframeの2重のスクロールバーを回避したい
1
+ CSSのみでiframeの2重のスクロールを回避したい
body CHANGED
@@ -1,15 +1,15 @@
1
1
  ###解決したいこと
2
2
  iframeを使い、ECサイトの構築を行っています。
3
- iframeを表示している部分は良いのですが、tableの領域スクロールが二重になり、
3
+ iframe領域から、下にスクロールする際は問題あませんが
4
- カーソルの位置によっては上に戻るスクロールでiframe/table両方の領域が見えてしまいます。
5
- tableの領域からスクロールアップしていく時に2スクロールバーを回避したいで
4
+ tableの領域に入るとスクロールが二になり、途中で上にスクロールすると、添付画像の様に
5
+ iframe/table両方の領域が見えてしまい、どちらもスクロールできてしまいます。
6
6
 
7
- 下記3点を検討したのですが、いれも不可でした。
7
+ table領域上スクロールる時にiframeはスクロールさせ
8
- ・window.postMessage()で子フレームから親にiframeの高さ -> 親にscript書けず断念
8
+ 可視範囲からtable領域が消えたらiframeをスクロールできれば良いと思っていのです...
9
- ・iframeのscrollingをnoにしてheightを調整していく -> さすがに現実的でない
10
- ・一番下までスクロールしたら、子フレームにoverflow:hiddenをつける -> スクロールアップで解除できない
11
9
 
10
+ ![現状スクショ](61b03ce6d2c0ba26adb357526cbb24e0.jpeg)
11
+
12
- cssのみ、もしくは子フレームのみのscriptで回避できる方法を探しています。
12
+ cssのみ、もしくは子フレームのみのscriptを書くことで回避できる方法を探しています。
13
13
  ご存知の方いらっしゃいましたらご教示頂けますと幸いです。
14
14
 
15
15
 
@@ -20,12 +20,30 @@
20
20
  <iframe id="body_template" scrolling="auto" src="/src/index.html" width="100%" height="100%" frameborder="0">
21
21
       <html>
22
22
       <head></head>
23
+ <body class="onProduct">
24
+ <main class="test_box" id="js-main">
25
+ <div class="product-hero_container">
26
+ <div class="product-hero_wrapper"></div>
23
- <body>
27
+ </div>
28
+ <div class="productArticle">
24
-       <section class="hero-images"></section>
29
+ <section class="st-Lead_container"></section>
30
+ <section class="product_lists">
31
+ <ul>
32
+ <li>
33
+ <div class="product-Block js-scroll-fade">
34
+ <div class="product_images"></div>
35
+ </div>
36
+ </li>
37
+ <li>
38
+ <div class="product-Block js-scroll-fade">
39
+ <div class="product_images"></div>
40
+ </div>
41
+ </li>
42
+ </ul>
43
+ </section>
25
- <section class="section_b"></section>
44
+ <section class="section_base3"></section>
26
- <section class="section_c"></section>
45
+ </div>
27
- <script src="jquery-3.2.1.min.js"></script>
28
- <script src="lib.js"></script>
46
+ </main>
29
47
  </body>
30
48
  </html>
31
49
  </iframe>
@@ -40,10 +58,49 @@
40
58
  <a href="image3"></a>
41
59
            </table> 
42
60
  </td>
61
+ <td>
62
+ <table cellspacing="2" cellpadding="0" border="0">
63
+ <tbody><tr><td>価格</td></tr></tbody>
64
+             <tbody><tr><td>名称</td></tr></tbody>
65
+ </table>
66
+ </td>
43
67
  </tr>
44
68
  </tbody>
45
69
  </table>
46
70
  </div>
47
71
  </div>
48
72
  </body>
49
- ```
73
+ ```
74
+ ```css
75
+ body {
76
+ padding: 0;
77
+ margin: 0;
78
+ }
79
+
80
+ .product-hero_container{
81
+ background-color: pink;
82
+ padding-bottom: 100vh;
83
+ }
84
+
85
+ .st-Lead_container {
86
+ background-color: aquamarine;
87
+ padding-bottom: 100vh;
88
+ }
89
+
90
+ .product_lists {
91
+ background-color: cornflowerblue;
92
+ padding-bottom: 100vh;
93
+ }
94
+ .section_base3 {
95
+ background-color: peachpuff;
96
+ padding-bottom: 100vh;
97
+ }
98
+
99
+ ```
100
+
101
+
102
+ 備考://
103
+ 下記3点を検討したのですが、いずれも不可でした。
104
+ ・window.postMessage()で子フレームから親にiframeの高さを送る -> 親にscriptが書けず断念
105
+ ・iframeのscrollingをnoにしてheightを調整していく -> さすがに現実的でない
106
+ ・一番下までスクロールしたら、子フレームにoverflow:hiddenをつける -> スクロールアップで解除できない