Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@fruitriin

画像を含むページ内遷移がズレるんでなんとかしたい

More than 1 year has passed since last update.

画像を含むページ内遷移をしたいとと思ったら、やっぱり基本は <a href="#hoge"><div id="hoge"> とかだと思うんですよ。それか <a name="hoge"> でもいいです。

で、遷移先までの途中に画像が差し込まれていると、ハッシュ付きURLで開いた時、
画像の読み込みによって遷移先がズレることがありませんか?

基本

  • 画像はサイズ指定するべき←サイズが指定されていればこの問題は起きないはず
  • 画像のサイズが読み込まれてからでないと決定しないときズレがち
  • アニメーションでサイズが可変になることでも生じる

対応策

function tryToScroll(img){
  leftImages--;
  if(leftImages === 0) scrollTo(img)
}

function scrollTo(el){
   el.scrollIntoView()
}

const imgs = document.querySelectorAll("img") //対象のタグは任意に変えること
let leftImages = imgs.length
imgs.forEach(img, () => {
  img.addEvemtListener("load", tryToScroll(img));
  img.addEvemtListener("error", tryToScroll(img));
})

多分これでうまくいくはず?
(空でタイプしたのでちょっと確認してないです。うまくいかなかったらコメントください)

アイデアとしては最初にimgタグの個数を数えて、読み込みおわりもしくはエラーならデクリメントし、
残っている画像の数が0個になったら再度スクロールを試みるというものです。

これで多分うまくいくんじゃないでしょうか

アニメーションするときの備え

cssアニメーションなどで画像を可変サイズにしたいとかもありますよね!
そういう時にもこの問題にぶちあたります。

まず確認するのは、アニメーション秒数が固定秒かどうかです。
たとえば0.2秒固定なら、0.2秒遅延して scrollTo() を試みましょう

function tryToScroll(img){
  setTimeout(() => {
    leftImages--;
    if(leftImages === 0) scrollTo(img)
  }, 200)
}

こんな感じでうまくいくんじゃないでしょうか。
試してみてください。

SPAとかありがち

APIリクエストの結果で画像の数とか変わるので、よしなに頑張りましょう(๑•̀ㅂ•́)و✧

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
studist
「伝えることを、もっと簡単に」をミッションにビジュアルSOPマネジメントプラットフォームのBtoB SaaS「Teachme Biz」を開発・運営するスタートアップ

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?