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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

2780閲覧

レスポンシブサイト内での不明なスクロールバーについて

hananoko_runrun

総合スコア21

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2017/05/08 09:29

いつもお世話になっております。
色々調べて、cssの方もいじってみたのですが、解決できないことがあり
質問をさせていただきます。とても困っております、、、

過去に同じような状況を経験されたことがある方がいらっしゃいましたら
お力をお貸しいただけないでしょうか?

現在レスポンシブのLPページを作っているのですが、ごく限られた環境で意味不明なスクロールバーが
表示されています。自分の環境のwindows10ではスクロールバーが表示されなかったのですが、
クライアントのデスクトップPCでは表示されるとのこと。イメージ説明

<スクロールバーが出てしまう環境>
OS:windows10(同じ全てのwindows10ではなく特定のpc)
ブラウザ:chrome、firefox(いずれも最新)

作っているのはLPで相当長いページなので、全てを詳細に書くことはできないのですが
必要な部分を大まかに書くとこんな感じです。

html

1<body> 2<header> 3: 4</header> 5<div class="wrapper"> 6<section class="main"> 7<div class="slider"> 8</div> 9</section> 10</div> 11<footer> 12: 13</footer> 14</boby>

css

1* { 2 box-sizing: border-box; 3 -webkit-box-sizing: border-box; 4 -moz-box-sizing: border-box; 5 -o-box-sizing: border-box; 6 -ms-box-sizing: border-box; 7 -webkit-text-size-adjust: 100%; 8} 9 10img { 11 max-width: 100%; 12} 13 14html, 15body { 16 font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Roboto, 'Droid Sans', sans-serif; 17 font-size: 14px; 18 letter-spacing: 0.1em; 19 width: 100%; 20 height: 100%; 21 font-weight: 200; 22 font-style: normal; 23 line-height: 1.7; 24 margin: 0; 25 padding: 0; 26} 27 28.wrapper { 29 overflow: hidden; 30} 31 32section{ 33 width: 1000px; 34 margin: 0 auto; 35} 36 37.slider{ 38 overflow: hidden; 39} 40 41@media screen and (max-width: 1000px) { 42section{ 43 width: 100%; 44} 45} 46

<設定>
1カラム構成。
PCではsectionが1000px固定となっており、1000pxを切った段階で
width100%に切り替わります。

<状況>
1000pxを切った時点で、添付画像のような縦横のスクロールバーが表示され、下にスクロールして行っても
この赤線の縦横スクロールバーがついてくる。
スライダー等のコンテンツを含むため、「.slider」にも念のため「overflow: hidden;」を入れています。

少しでも、ヒントが見つかればと思い、すがる気持ちで質問をさせていただきました。

何卒よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

ブラウザの表示の拡大率が100%であるかを確認してみて下さい

投稿2017/05/08 13:44

yuki84web

総合スコア1857

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

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

hananoko_runrun

2017/05/09 01:28

>yuki84webさま ご回答いただきましてありがとうございます! 念のため、クライアントに確認をとりたいと思います。
hananoko_runrun

2017/05/09 06:06

クライアントに確認をいたしました。 拡大はしていないとのことで、chrome、firefox共にまだスクロールバーが出ている とのことでした。 もし他に心当たりがございましたら、ぜひご教授くださいませ。
yuki84web

2017/05/09 13:45 編集

そうですか…一番良いのは、問題が出ているPCを直接触って検証することですが、クライアント先となると難しいですね。ちなみにスクロールバーは、実際にスクロール出来るものなのか、単に動かせないものが表示されているだけ、どちらでしょうか?それから、HTMLの内容が最低限ですが、記述されているもの以外にコンテンツは無い状態でしょうか?バーが出る要素の内部の要素が影響している事もあります。それから、問題が発生している環境に何からのアドオンが有効な状況で入っていて、それが影響していないかも確認すると良いと思います。
hananoko_runrun

2017/05/10 01:46

>yuki84webさま 度々お力をお貸しいただきありがとうございます! クライアントとはいえ私は二次受けなので、直接検証を提案はしているのですが、 元の依頼主からはこのような指摘が入っていないので、案件を進めることを指示され、 悶々とした日々を送っております。そのうち、検証の機会が与えられるかもしれませんが。 何パターンか画面もキャプチャをもらったのですが、スクロールはできなそうです。 この縦横のスクロールバー内にはコンテンツは無いようです。スクロールバーがついてくる状況で スクロールバーが乗っていても背面にコンテンツが見えている状態です。 どの部分のblockが影響を与えているかが検証できないので、悔しいところです。 LPなので、すごく長いページなので、全部のコードを書くことはできないのですが、 positionだったり、display table、float等を多様しているような状況です。 アドオンが影響を与えることもあるのですね。知らなかったです! 検証をできる機会ができた際には、そこらへんも含め確認をして見たいと思います。 親身に相談に乗っていただきありがとうございますm(_ _)m
guest

0

使用されているJavascriptなりの方でoverflowを制御している可能性が高いと思うので、お使いになっているもののドキュメントを見て解決する可能性はあると思いますが、
とりあえずimportantを使用してみてどうでしょうか?

投稿2017/05/08 09:43

yoorwm

総合スコア1305

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

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

hananoko_runrun

2017/05/08 10:22

>yoorwmさま 早速のご回答ありがとうございます!感謝いたします。 スライダーはslickを使っております。 http://kenwheeler.github.io/slick/ あと使っているプラグインとしては、fastclick(スマホのクリック応答速度を速くしてくれる)くらいでしょうか。 https://ftlabs.github.io/fastclick/ 私の環境では再現がされていないので、importantを加えて、クライアントに確認していただこうと思います。 結果はまたこちらで記載をさせていただこうと思います。
hananoko_runrun

2017/05/08 10:31

>yoorwmさま クライアントから連絡が来ました。 やはりまだ解消されないとのことでした。 (chromeのシークレットモードで確認しているのでキャッシュはない模様です) もし他に心あたりがございましたら何卒よろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問