0

スクロールバーのつまみの部分を非表示にしてスクロールしないようにしたいのですが、どうすればいいのでしょうか。

スクロールバー自体を消すのは overflow: hidden でできますが、消すと消えた領域分だけ画面がガタつくので表示したままでスクロールだけできないようにしたいです。
(instagramがこのガタつく方式)

実際appleのサイトでつまみが消えるのですがどうやっているのかわかりません。
appleサイトのヘッダーの右側にある検索アイコンをクリックすると、つまみが消えてスクロール不可になりモーダルが表示されます。
https://www.apple.com/jp/

chrome、firefox、edgeのいずれでも消えます。

1 件の回答 1

1

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;
}
<button type="button">検索</button>

<h1>見出し</h1>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

1
  • overflow-yはbodyじゃなくhtmlなんですね。 うまくいきました。ありがとうございます。
    – anlovean
    Commented 2020年11月22日 15:51

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。