web-dev-qa-db-ja.com

ウェブサイトのダブルスクロールバー

私が担当しているWebサイト： www.livingsalads.co.uk ほとんどのブラウザー（とにかくChrome）に二重のスクロールバーがあります。見た目が悪く、ブラウザが時々何もしない誤ったスクロールバーを使用するため、これは明らかに問題です。

スクロールバーの1つは実際にスクロールし、もう1つは実質的に何もしません。

私はオンラインで見た方法を試しました：

1）削除：

html, body {
    overflow: auto;
}

style.cssから。これで問題が解決することはなく、モバイルのナビゲーションバーがおかしくなります。

2）追加

.template-container {
   overflow-y: hidden;
}

再び何もしませんでした。

WordPressサイトを実行しています。

助けてくれてありがとう
アルバート

htmlcss
1
AlbertJ

ボディの最小高さを100vhに設定し、オーバーフローを設定しているため、基本的にはダブルスクロールバーが表示されます。これは、モバイルデバイスでメニューを正しい位置に保つために行われたようです。

オーバーフローを強制することで問題を解決できました：

html, body {
    overflow: visible;
}

Chromeで修正されたことで、他のブラウザーも想定していますが、厳密なテストは行いませんでした。

2
Bryce Howitson

Chrome=でサイトを開いて、CSSルールをいくつか試してみました。

.main { 
    overflow-y: hidden
)

同様に、.containerに同じルールを追加することで、別の方法で修正することができました

.container {
   overflow-y: hidden;
}

nav .container {
   overflow-y: visible;
}

これらの2つのソリューションは、機能しなかった.template-containerソリューションに似ているように見えますが、サイトで.template-containerを見つけることができませんでした。同様に、これらのソリューションはChromeデスクトップで問題を修正し、私がChromeをモバイルでエミュレートしたときに、.

0
Mike W