2014
05/07

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

overflow

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

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

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

ADs

解決策

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

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

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

ADs

Post Comments

メールアドレスが公開されることはありません。

Comments

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