質問: スクロールバーのつまみの部分を非表示にしてスクロールしないようにしたいのですが、どうすればいいのでしょうか。 スクロールバー自体を消すのは `overflow: hidden` でできますが、消すと消えた領域分だけ画面がガタつくので表示したままでスクロールだけできないようにしたいです。 (instagramがこのガタつく方式) 実際appleのサイトでつまみが消えるのですがどうやっているのかわかりません。 appleサイトのヘッダーの右側にある検索アイコンをクリックすると、つまみが消えてスクロール不可になりモーダルが表示されます。 chrome、firefox、edgeのいずれでも消えます。
回答: `body` 要素へ `height` プロパティと `overflow` プロパティを指定し、ビューポートの高さで `body` 要素内のコンテンツを切り取ったうえで、 `html` 要素へ `overflow-y: scroll` を指定することで「ページコンテンツによるスクロールは行わせないが、スクロールバーは表示させる」という挙動を実現することが出来ます。 ``` document.querySelector("button").addEventListener( "click", function() { document.querySelectorAll("html, body").forEach(elm => elm.classList.toggle("scrollbar")); } ); ``` ``` body { margin: 0; } html.scrollbar { overflow-y: scroll; } body.scrollbar { height: 100vh; overflow: hidden; } ``` ``` 検索 見出し テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト ```