72145


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

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

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

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


CC BY-SA 4.0
2020-11-22T05:38:02.487
72142
2020-12-21T06:07:02.823
2020-12-21T06:07:02.823
32986
34267
question
javascript html css
スクロールバーのつまみの部分を非表示にしてスクロールできないようにしたい


`body` 要素へ `height` プロパティと `overflow` プロパティを指定し、ビューポートの高さで `body`
要素内のコンテンツを切り取ったうえで、 `html` 要素へ `overflow-y: scroll`
を指定することで「ページコンテンツによるスクロールは行わせないが、スクロールバーは表示させる」という挙動を実現することが出来ます。

[code]

    document.querySelector("button").addEventListener(
      "click",
      function() {
        document.querySelectorAll("html, body").forEach(elm => elm.classList.toggle("scrollbar"));
      }
    );
[/code]

[code]

    body {
      margin: 0;
    }
    
    html.scrollbar {
      overflow-y: scroll;
    }
    
    body.scrollbar {
      height: 100vh;
      overflow: hidden;
    }
[/code]

[code]

    <button type="button">検索</button>
    
    <h1>見出し</h1>
    
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
[/code]


CC BY-SA 4.0
2020-11-22T08:37:09.577
72145
2020-11-22T08:37:09.577
32986
72142
answer