JavaScriptで制御する
以前も背景を固定したページをInternetExplorer（IE）で表示した時に背景が上下に揺れるという現象についてお知らせしました。
この場合でも無事に解決に至りますが、スクロールバーがカスタマイズされてしまいます。
スクロールバーが常に表示されなくなるので、無駄なく画面配置がされているのですが、これが逆に操作しにくいとか、見慣れないとか、そういう点ではデメリットになることもあります。
そんな場合でも対応するために、JavaScriptを使って、原因となっているIEのスムーズスクロール機能をOFFにしてしまう事で対処ができます。
$(‘body’).on(“mousewheel”, function () {
event.preventDefault();
var wd = event.wheelDelta;
var csp = window.pageYOffset;
window.scrollTo(0, csp – wd);
});
}
IEの時だけマウスのスクロール機能を無効にしています。それでは閲覧に支障がでるので、JavaScriptでスクロール処理をした分だけ動かすという物です。
ブラウザ側で持っているスムーズスクロールを無効にする設定をJavaScriptを使って疑似的に処理しています。
ブラウザの設定は個人の設定次第になってしまうので、どうしても手が出せませんし、もし変更できたらそれはそれで問題ですね。
勝手に個人のアプリ内の設定を変更してしまうような事ができたら、いくらでも悪い事に悪用されてしまいますし・・・
このJavaScriptを導入してみて、IEで背景が上下に動くという現象も解決できますし、新たに発生する問題も特にありません。
普段と同じ見え方にしつつ、背景が上下に動く現象を解決したいという場合にはお勧めです。
まとめ
IEのみで背景を固定にしたページを表示させてスクロールした時、背景画像が上下に動きます。前回の記事でもそうですが、やはりJavaScriptを使って解決するしか方法はなさそうです。
CSSを使っても解決はできますが、今度はスクロール量を使った処理が出来なくなるので、それはそれで新たな問題が山積みになってしまいます・・・
彼方立てれば此方が立たぬ・・・そんな状況になってしまい、困惑しますよね・・・
実際にCSSを入れて、解決！と思っても、スクロールに応じて特定の要素にstyleを付与する処理が動かなかったり・・・通常の閲覧にも支障が出るようなこともあったりと、あまりいい手段ではありませんでしたので、JavaScriptを使って解決させる手段が今のところベストな方法なのではないでしょうか。
流石にJavaScriptを無効にして閲覧している方はサポートしきれませんので、それはそれで別のアプローチが必要になりますが、そもそも初期状態ではJavaScriptが有効になっているので、特段問題ないでしょう。
自分で設定を変更できる方や、変更したいと思っている方は一定の知識のある方だと思われるので、背景が上下に動いたとしても、JavaScriptが無効だからか・・・とか、IEで見ているからか・・・と気が付くはずですので、そこまで深く考えなくてもいいのかもしれません。
それにしてもIE特有のバグは、いつでもついてまわる物だなぁと思ってしまいます。
年々改善された物がリリースされていますが、使われる技術も年々新しくなったり、トレンドが変わったりします。その時に対処しきれていない部分が明るみに出てくるような感じなのでしょうか・・・
