Microsoft Edgeのスクロールバーとコンテンツの重なりを防ぐ

 

 Web技術

ページトップへ戻るボタンを作成し、
「position:fixed; right:0;」でブラウザの右端に配置していたのですが
Microsoft Edgeで見た時にスクロールバーに重なってしまいました。

Chromeやfirefoxなどでは問題無くスクロールバーのすぐ横に配置されていますが。

Edgeではスクロールバーに重なってしまいます。。。

Edgeのviewportの仕様でした

viewportのwidthの値をdevice-widthに設定した場合に
コンテンツの領域がスクロールバーの領域を含むため起こります。

このためブラウザ幅いっぱいにしているコンテンツや
右端に配置しているコンテンツが
スクロールバーと重なってしまいます。

CSS

META

対応方法

viewportのwidthの値をautoにする、
-ms-overflow-styleプロパティをscrollbarに指定することで
対応できます。

 

私はMETA要素でviewportを指定していましたが
-ms-overflow-styleプロパティの指定で対応できました。


▼参考にさせていただきました。ありがとうございました。

 この記事の投稿者

taka

taka

Webサイト作ってます。
最近のモットー「決して無理をしないスタイル」

twitter: @taka_sbs

  • このエントリーをはてなブックマークに追加
  • 0 follow us in feedly

メッセージ

入力エリアすべてが必須項目です。
メールアドレスが公開されることはありません。

*コメント

*名前

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

ページ最上部へ