Q&A
現象がでるのは、iphone だけですか。
PCやアンドロイドスマホではどうでしょうか。
overflowはhiddenとscroll両方つけることができますか？
＃outは一番外の枠です。この中に要素が入っています。
outからはみ出てしまったx軸の要素をoverflow: hidden;で隠しつつ
y軸要素はoverflow: scroll;をつけたいです。
html
1<!-- out --> 2 <div id="out"> 3 4------------省略------------ 5 6 </div>
css
1#out{ 2 width: 100vw; 3 overflow: hidden scroll; 4 scroll-snap-type: y mandatory; 5 height: 100vh; 6 position: relative; 7}
現在、このように書いてありますが、iphoneで実機確認をするとoutの外に白いスペースが出現します。
-----------追記-----------
↓↓↓↓↓下にスクロール↓↓↓↓↓↓
こちらが実際の実機画面（横）です。
このように外側に白いスペースが出来てしまいます。
-----------更に追記-----------
html
1<body> 2 3 <!-- out --> 4 <div id="out"> 5 <div style="white-space: nowrap;"> 6 7 <!-- scroll area --> 8 <section class="area"> 9 10 <!-- header --> 11 <div id="header"> 12 13 <div id="sisi-box"> 14 <img src="img/sisi.png" alt="唐獅子" id="sisi"> 15 </div> 16 17 <div id="swirl-box"> 18 <img src="img/ swirl.png" alt="" id="swirl1"> 19 <img src="img/ swirl.png" alt="" id="swirl2"> 20 <img src="img/ swirl.png" alt="" id="swirl3"> 21 <img src="img/ swirl.png" alt="" id="swirl4"> 22 <img src="img/ swirl.png" alt="" id="swirl5"> 23 <img src="img/ swirl.png" alt="" id="swirl6"> 24 </div> 25 26 <ul id="nav-box"> 27 <a href="#window" id="work"><li>WORK</li></a> 28 <a href="#window" id="profile"><li>PROFILE</li></a> 29 <a href="#window" id="contact"><li>CONTACT</li></a> 30 </ul> 31 32 <div id="lant-box"> 33 <a href=""><img src="img/lantern.png" alt="" id="lant"></a> 34 </div> 35 36 </div> 37 38 </section> 39 40 <!-- middle --> 41 <div id="middle"> 42 43 <div id="gl-box"> 44 <img src="img/patern.png" alt="金の帯" id="gl-band"> 45 </div> 46 47 <div id="rm-box"> 48 <img src="img/ranma.png" alt="" id="ranma"> 49 </div> 50 </div> 51 52 <!-- scroll area --> 53 <section class="area"> 54 55 <!-- window --> 56 <div id="window"> 57 58 <div class="content"> 59 <div id="room-box"> 60 61 <!-- magatama --> 62 <div id="mt-box"> 63 <img src="img/magatama.png" usemap="#ImageMap" alt="" id="mt"/> 64 <map name="ImageMap"> 65 <area href="javascript:b();" class="mt-green" shape="poly" coords="114,34,127,27,146,24,161,25,177,28,193,33,216,45,231,57,246,71,257,90,268,115,274,135,275,150,275,161,274,171,273,179,267,166,264,156,258,147,252,140,242,132,236,128,215,121,197,122,188,125,174,128,152,136,141,136,130,133,124,132,117,129,109,122,101,111,94,99,92,85,92,76,94,66,99,52,106,43,110,38,114,36,114,36" alt="緑" /> 66 <area href="javascript:b();" class="mt-yellow" shape="poly" coords="63,245,68,249,73,253,83,259,95,265,110,270,122,273,138,276,152,277,161,277,173,275,184,273,202,267,214,260,225,253,232,245,243,237,249,230,257,217,261,210,266,196,268,185,265,168,262,159,257,152,252,146,240,137,230,132,216,129,203,128,195,130,186,132,176,138,171,142,167,148,162,154,159,161,156,170,154,181,152,189,149,199,147,206,144,214,141,221,133,230,128,234,120,239,112,243,99,247,92,247,81,247,74,246,69,246,64,244,83,247" alt="黄色" /> 67 <area href="javascript:a();" class="mt-red" shape="poly" coords="106,34,98,35,91,38,85,41,79,45,75,48,69,53,63,57,61,59,57,62,52,71,47,76,45,78,36,92,34,101,32,104,28,116,25,125,24,136,22,149,23,160,24,167,25,177,27,184,28,189,32,201,37,211,40,216,44,224,48,227,54,232,61,236,67,238,78,241,90,242,102,241,109,238,114,235,119,232,123,229,126,226,132,221,136,215,141,207,144,198,144,192,146,187,144,176,145,203,146,184,143,170,139,164,137,159,130,149,123,142,119,140,111,132,108,129,105,125,96,117,92,109,89,99,87,86,89,70,90,63,92,58,93,54,96,49,98,44,101,41,104,36,104,36" alt="赤" /> 68 </map> 69 </div> 70 71 <!-- door --> 72 <div class="left"> 73 <div> 74 <p class="fadeIn">Home</p> 75 </div> 76 </div> 77 <div class="right"></div> 78 </div> 79 </div> 80 81 </div> 82 83 </section> 84 85 </div> 86 </div> 87 88<script src="javascript/jquery.js"></script> 89 90</body>
css
1body{ 2 width: 100vw; 3 line-height: 0; 4 background-color: rgb(214 150 43); 5} 6*:focus { 7 outline: none; 8} 9#out{ 10 margin: 0; 11 width: 100vw; 12 overflow: hidden scroll; 13 scroll-snap-type: y mandatory; 14 height: 100vh; 15 position: relative; 16} 17::-webkit-scrollbar{ 18 display:none; 19} 20/* scroll auto */ 21.area { 22 scroll-snap-align: start; 23 height: 100vh; 24 transition: scroll-snap-align 10s; 25} 26/*---------- head ----------*/ 27 28/*---------- middle ----------*/ 29 30/*---------- window ----------*/ 31
css中身は省略していますが、だいたいこういう状態です。
outの中にhead,middle,windowが入っています。
回答4件
0
追加のコードで、PCで確認してみましたか、現象を確認できませんでした。
よって、当てずっぽうですが、下記の追加修正でどうなりますか。
css
1body{ 2 width: 100vw; 3 line-height: 0; 4 background-color: rgb(214 150 43); 5 overflow: hidden; /* 追加 */ 6 margin: 0; /* 追加 */ 7} 8#out{ 9 margin: 0; 10 width: 100%; /* 修正 */ 11 overflow: hidden scroll; 12 scroll-snap-type: y mandatory; 13 height: 100vh; 14 position: relative; 15} 16
投稿2021/01/21 03:04
総合スコア33699
デベロッパーツールでのホールドによる、x軸の白余白は消えたのですが、実機で確認すると白い余白が出現してしまいます。。。
実機画像を見ると、img画像の上に重なってテキストなどの要素が表示されていますが、提示のコードではそうならないので、CSSコードで提示されていない部分があると思います。
mahnyさんも指摘していますが、画像の幅を100%に指定したらどうなりますか。
あと、img/sisi.png はimg要素ではなく、背景画像(background-image)で設定した方がシンプルかつトラブルなく実装できそうに思います。
headのsisiの画像には横幅を合わせるスタイルを入れてません
縦の長さに応じてsisiの画像を大きくしています。
ですが、そもそもoutから外にでた要素はoverflow: hidden;していますので、そこは問題ないかと思われます...
よろしくお願いします。
できました！原因はiphoneX以降のノッチの問題でした。
https://qiita.com/spre55/items/5968e759178ac0617cde
こちらご参照ください。本日は、たくさんのアドバイスありがとうございました！
0
overflowはhiddenとscroll両方つけることができますか？
この質問の回答としては可能。
で、既にできているような気もするんですが、width: 100vwあたりが悪さをしていませんか？
これは画面サイズに対する割合なんで、#out自身がmarginなどでx方向にずれるとその分はみ出します。
なので、<div id="#out">xxx</div>とその外側のタグの兼ね合いで。。。
とりあえず外側にmargin: 0をつけて画面サイズに合わせるとこんな感じになります。
試してみたコード(確認用:https://jsfiddle.net/519dkg8z/)
html
1<div id="out"> 2 <div style="white-space: nowrap;"> 3 ああああああああああああああああああああああああああああああ 4 いいいいいいいいいいいいいいいいいいいいいいいいいいいいいい 5 </div> 6 <script><!-- 7 for (let i = 0; i < 100; i++) { 8 document.write('<div>' + i + '</div>'); 9 } 10 //--></script> 11</div> 12
css
1body { 2 margin: 0; 3 padding: 0; 4} 5#out { 6 margin: 0; 7 background-color: #ccffff; 8 width: 100vw; 9 overflow: hidden scroll; 10 scroll-snap-type: y mandatory; 11 height: 100vh; 12 position: relative; 13} 14
追記1
ChromeDevToolでの確認ですが再現せずです。
ただ、画像が画面右の外にはみ出したので…
html
1<img src="img/sisi.png" alt="唐獅子" id="sisi">
このように修正しています。
html
1<img src="img/sisi.png" alt="唐獅子" id="sisi" style="width: 100%; height: auto;">
実は、iPhone実機の解像度が画像よりも大きくて余白になっているだけではないでしょうか？
よろしくお願いします。
追記2
追加cssを適用し、imgタグからインラインスタイルを外してみました。
画像ははみ出ますが、少なくとも余白の問題は起きないです。
まだ出していない情報ないですか？
回答者側は貰った情報でしか検証できないので、書いたものだけで現象が起きるのかどうかはご確認いただけると嬉しいです。
もし実機のみの現象であれば私の手元にはiPhoneがないのでもうギブです。ごめんなさい。
よろしくお願いします。
投稿2021/01/21 02:18
編集2021/01/21 04:38
退会済みユーザー
総合スコア0
すみません、やっぱりoutの外側に白いスペースが出てきます。。。
うーむ、白い部分がなんのタグなのか特定するのが良さそうですね。
質問の更新をいたしました。
よろしければご覧いただけますでしょうか？
outより外には何もタグをつけていないのです。。。
実機持っていないのでChromeのDevToolにiPhone5のプロファイルを当ててみましたが
再現しないですね。
で、気になったんですが画像サイズって原寸のままだったりします？
横幅を合わせるスタイルが入っていないのでもしや…。
回答に追記しました。
#header{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(214 150 43);
}
/* sisi */
#sisi-box{
width: 70vw;
display: flex;
justify-content: center;
align-items: center;
z-index: 250;
}
#sisi{
height: 90vh;
}
headのsisiの画像には横幅を合わせるスタイルを入れてません
縦の長さに応じてsisiの画像を大きくしています。
ですが、そもそもoutから外にでた要素はoverflow: hidden;していますので、そこは問題ないかと思われます...
よろしくお願いします。
大変申し訳ないのですが、全情報の開示はデザインのポートフォリオなどを載せるサイトになりますので、でき兼ねます。。。
それと、デベロッパーツールでは問題なく動きます。ですが、実機でやると説明文に載せたような白余白が出ます。
画像に関しましては、スマホとPC表示で別々の配置にするため、メディアククエリを使用しています。
白余白ができるのは画面を横にした状態です。（PC画面のような配置になります。※説明文の画像です。）
スマートフォン上で確認するためのURLがあるのですが、もしよろしければ何かSNSのDMでこちらのリンクをお送りして確認することは可能でしょうか？
送らなくて大丈夫です。iPhoneを持っていないのでどのみち確認できません。
たしか、MacだとライトニングケーブルかUSB-TypeCあたりでiPhoneとつないで
Mac側のSafariでデバッグが出来たかと思うんで、それで原因特定できるかもですね。
まあ、私はMacもないのでそれすら確認できないのですが（汗
Android/iOS端末でChromeとSafariのデバッグをする - Qiita
https://qiita.com/spre55/items/5968e759178ac0617cde
iphoneだけでなくサイト自体のurlがあるのでandroidでも確認が取れます！
一時的に私のプロフィールのサイトリンクを貼っておきます。
確認お願いします。
それと、お送りいただいた物も試しにやってみます！
ありがとうございます。
確認したのでURLは削除しちゃってください。
Android端末（Xperia XZ1 Compact、Chrome）でも余白の問題は出ませんでした。
私としてお手上げです。
できました！原因はiphoneX以降のノッチの問題でした。
https://qiita.com/spre55/items/5968e759178ac0617cde
こちらご参照ください。本日は、たくさんのアドバイスありがとうございました！
mahnyさんのsafariで実機のデベロッパーツールが直接みれるというのを使用しました。
大変役に立ちました。ありがとうございます！
0
overflow プロパティは1つの値だけ指定できます。このケースでは overflow-x overflow-y プロパティを使いましょう。
css
1 overflow-x: hidden; 2 overflow-y: scroll;
追記: コメントで指摘があったように、この回答は間違いでした。
投稿2021/01/21 02:00
編集2021/01/21 02:12
総合スコア20832
overflow プロパティは、 overflow-x と overflow-y の一括指定なので、
overflow: hidden scroll;
というように指定できます。これは、
overflow-x: hidden;
overflow-y: scroll;
という意味になります。
https://developer.mozilla.org/ja/docs/Web/CSS/overflow
質問の趣旨は、iphoneで実機確認すると想定通りにならないということだと思います。
おお、これは間違って覚えてました。指摘ありがとうございます。
↓↓↓↓↓下にスクロール↓↓↓↓↓↓
こちらが実際の実機画面（横）です。
このように外側に白いスペースが出来てしまいます。
すいませんここに画像貼れないようなので、質問の投稿に貼らせていただきます！
できました！原因はiphoneX以降のノッチの問題でした。
https://qiita.com/spre55/items/5968e759178ac0617cde
こちらご参照ください。本日は、たくさんのアドバイスありがとうございました！
0
自己解決
原因はiphoneX以降のノッチの問題でした。
https://qiita.com/spre55/items/5968e759178ac0617cde
こちらご参照ください。
投稿2021/01/21 06:57
総合スコア11
あなたの回答
tips
プレビュー
