Q&A
実現したいこと
画面の右上にボタンをfixedとして固定するのですが、画面の縦方向へのコンテンツが増え、スクロールバーが現れた瞬間に少しずれてしまいます。スクロールバーのあるないに関わらず、ボタンのポジションを固定したいです。
前提
ウェブサイトの模写をしていてこの問題に出会いました。それを超簡略化したものが以下のコードです。この問題を可視化するため、ボタンをクリックすると「main」の縦幅が画面の表示の2倍に広がるようにしました。クリックするまでは、ちゃんとそろっているのですが、「main」が広がった途端に、ボタンがじゃっかん内側に寄ってしまいます。スクロールバーが現れるせいなのかな？と思うのですが、どなたかこれの解決策を教えてくださいませんか。JavaScriptを使わなければならない場合でも結構です。
発生している問題・エラーメッセージ
上記の通りです。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="style.css"> 8 <title>Document</title> 9</head> 10<body> 11 <button class="btn" onclick="document.querySelector('.main').classList.toggle('expand')">ボタン</button> 12 <header class="container header"> 13 <div>ヘッダー</div> 14 </header> 15 <main class="container main"> 16 <div>メイン</div> 17 </main> 18 <footer class="container footer"> 19 <div>フッター</div> 20 </footer> 21</body> 22</html>
css
1* { 2 margin: 0; 3 padding: 0; 4 box-sizing: border-box; 5} 6 7.btn { 8 background-color: white; 9 border: 1px solid black; 10 width: 60px; 11 height: 30px; 12 position: fixed; 13 top: 0; 14 right: 10vw; 15 cursor: pointer; 16} 17 18.container { 19 width: 80vw; 20 margin: 0 auto; 21} 22.container.header { 23 background-color: antiquewhite; 24 height: 100px; 25} 26.container.main { 27 background-color: aquamarine; 28 height: 300px; 29} 30.container.main.expand { 31 height: 200vh; 32} 33.container.footer { 34 background-color: blueviolet; 35 height: 100px; 36}/*# sourceMappingURL=style.css.map */
試したこと
JavaScriptで、スクロールバーが現れたら、ボタンのrightの数値を状況に合わせて変える、というようなものを考えましたが、お恥ずかしながらまだそれを自力で書けるレベルにありません。
補足情報（FW/ツールのバージョンなど）
回答1件
0
ベストアンサー
ボタンの位置をright: 10vw;で指定していますが、
fixed はスクロールバーを除いた画面幅を基準に配置します。
right: 0;と設定すればスクロールバーがあるときは、スクロールバーの左に位置することからもわかります。
それに対して、.containerはwidth: 80vw;とvw単位で幅を設定しています。vwはスクロールバーも含む幅になります。
そのため、スクロールバーの有無によって、.containerの幅は変わらないのに、 ボタンの位置は変わるので、両者にずれが生じています。
対策としては、単位をvwではなく%(スクロールバーを除いた幅になる)で指定すればいいでしょう。
css
1.btn { 2 right: 10%; 3} 4.container { 5 width: 80%; 6}
あるいは、幅をvwで指定したい場合は、100vw - 100% でスクロールバーの幅が計算できるので、それを利用して、
css
1.btn { 2 right: calc(10vw - (100vw - 100%) / 2); 3} 4.container { 5 width: 80vw; 6}
投稿2023/06/02 22:53
編集2023/06/02 23:49
総合スコア33715
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/06/03 11:10