14

ウェブページのスクロールを無効にしたいのですが、スクロールバーを無効にするだけでなく、

overflow: hidden

動作しないでしょう。

また、この回避策は、エッジの「ソフト スクロール」のため、Mac には適用されません。ひどく揺れるアニメーションが表示されます。

window.onscroll = function () {
window.scrollTo(0,0);
}

スクロールを完全に無効にする他の方法はありますか?

4

1 に答える 1

46

簡略化された HTML コードを次のように仮定します。

<html><body><div class=wrap>content...</div></body></html>

body と html の両方を height:100%; に設定します。

body, html {height:100%;}

body 内に div を配置し、body の高さ全体にストレッチするように設定します。

div.wrap {height:100%; overflow:hidden;}

これにより、マウスホイールを押して移動したり、アンカーを使用したりするなど、ウィンドウが奇妙な方法でスクロールするのを防ぎます。

スクロール バー自体を (視覚的に) 削除するには、以下も追加する必要があります。

body {overflow: hidden; }

キーボードの矢印キーを押してスクロールを無効にするには:

window.addEventListener("keydown", function(e) {
    // space, page up, page down and arrow keys:
    if([32, 33, 34, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);
于 2013-05-19T17:30:29.543 に答える