overflow:hiddenにしてもChromeでスクロール出来てしまう問題を解決する

overflow

htmlとbodyに対してoverflow: hidden;を指定すると、ブラウザ標準のスクロールバーを消すことが出来ます。
手法の是非はさておき、スクロール時の処理をすべて自力で制御したり、凝ったパララックスを実装するときなどで使うことがあるかもしれません。

しかし上記の指定だけの場合、2014年5月7日現在で最新版であるChrome 34では、コンテンツのheightがウインドウのheightよりも大きい場合にホイールによるスクロールができてしまうという現象に遭遇しました。
どうやらChrome 32からスクロールバーまわりの処理が変更されたようなので、最新以前のバージョンでも発生する可能性があります。

ホイールでスクロールできてしまう例

AD

解決策

bodyに対してposition: fixed;とwidth: 100%;を指定してやるとホイールによるスクロールもできなくなります。

ホイールでもスクロールできない例

小ネタですが、参考になれば幸いです。

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。