Internet Explorerでスクロールさせつつlocation.hash動かす時は先にhashを設定すべし

  • 0
    いいね
  • 0
    コメント

    結論

    やるべき事は記事タイトルの通り。
    Google Chromeとかと動きが違うので知っとかないとハマる。
    ザッと探しても類似情報が見つけられなかったのでメモとして投稿しとく。

    何が問題なのか

    古いバージョンは知らないが、IE11ではlocation.hashを変更すると要素のスクロール位置がリセットされる。
    縦スクロールの位置(scrollTop)を大雑把にアンカーまで飛ばす程度なら気にならないが、横スクロールの位置(scrollLeft)の制御もやりたい時などはこれでは困る。

    ダメだった例

    NG
    element.scrollLeft = anotherElem.getAttribute("x");
    location.hash = anotherElem.getAttribute("id");
    

    何をやろうとしてるか気になる人向けに説明すると、htmlに同居させてるsvg(widthが30000とかある)のx属性値を読んで外側のboxの横スクロールをそこまで持っていこうとしている。
    これをIEで実行すると一瞬だけ横スクロールが合った後すぐに左端に戻されてしまう。
    (厄介な事にChromeはこれでも上手く行く)

    直った例

    OK
    location.hash = anotherElem.getAttribute("id");
    element.scrollLeft = anotherElem.getAttribute("x");
    

    と言う訳で意図した動作をしてくれるのはこっち。
    IEガーとか文句垂れる前に挙動をよく観察しような、オレ。

    余談

    IEはcanvasもタテ・ヨコ8kまでしか描画してくれなかったりするので注意しておくべき。
    MSDNの「CanvasかSVGか」という記事には「大きな画像を描画しなくてはならない場合はSVGを選びます」とは書かれていないので、とても一画面に収まらないようなサイズになるのが分かっているなら対策を考えておこう。

    PCモニタが幅8k当たり前になるのはずっと先だろうから、その頃までIEが生きのこっているかまでは心配しなくていい。多分しないと思う。生きのこらないんじゃないかな。ま、ちょっと覚悟はしておけ。