JS:element.getBoundingClientRect()が正しく取得できない

Question

発生している問題・エラーメッセージ

wordpress でajaxを使用してhtmの更新を行なっています
スクロールの位置を保持するために、
下記のようにタイマーで3秒おきにhtmlを取得しているのですが、
htmlの内容に変化がないにもかかわらず、
element.getBoundingClientRect().left で取得するごとに数値が大きく異なります（）

手動でリロードすると毎回867.875なのですが
タイマーでajaxを投げると下記のように２回ずつ下記のようなログが取得されます

[object HTMLDivElement]--867.875
[object HTMLDivElement]---79.625
[object HTMLDivElement]--867.875
[object HTMLDivElement]---79.625
[object HTMLDivElement]--867.875
[object HTMLDivElement]---79.625
[object HTMLDivElement]--867.875
[object HTMLDivElement]---79.625

わけがわからず困っています。
何かアドバイスをいただけると助かります

該当のソースコード

setInterval((function() {

    $.ajax({
        type: "post",
        dataType: "json",
        url: '<?php echo admin_url('admin-ajax.php'); ?>',
        data: {
            //Action
            action: "loadpost",
            math_id: <?php echo $terms_id; ?>,
        },
        context: this,
        success: function(response) {
            if (response.success) {

                $('#gvt-edd-grid-container').html(response.data);

                //スクロールしたい要素のID
                var slideid = $("#" + game_id + "").text();
                var element = document.getElementById(slideid);
                bounds = element.getBoundingClientRect().left + window.pageXOffset - (50 * 2);
                console.log(element + "--" + bounds);

            } else {
                console.log(response);
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log('loadpost error occured: ' + textStatus, errorThrown);
        }
    })
    return false;
}), 3000)

試したこと

タイマーの秒数を長くしたり、しましたが
変化がなく、困っています

Comments

[shinoharat]

質問文の以下の部分がよくわかりません。
書いてあるログを見る限り、値は常に 867.875 で、増えているようには見えないのですが・・・？

> element.getBoundingClientRect().left で取得するごとに数値が大きく異なります（）
>
> 手動でリロードすると毎回867.875なのですが
> タイマーでajaxを投げると下記のように２回ずつ下記のようなログが取得されます
>
> [object HTMLDivElement]--867.875
> [object HTMLDivElement]---79.625
> [object HTMLDivElement]--867.875
> [object HTMLDivElement]---79.625
> ...

[Ruri5280]

console.log(element + "--" + bounds);
で出力するとログが867.875と79.625と交互に表示されます

[Ruri5280]

もしかして、element.getBoundingClientRect().leftって
現状のスクロール位置によって数字違うとか？？

[shinoharat]

79.625 の方はハイフンの数が3本なので、別の console.log な気がしますが、どうですか？
試しにコードを

console.log(element + "--test--" + bounds);

に変えたら、79.625 側の表示も変わりますか？

[Ruri5280]

試してみましたが、同じですね、、
ハイフンの数が3本というよりは２本でマイナス79.625みたいです。
要素の左端を画面の左端にしたいのですが、どうすれば良いでしょうか、、

[int32_t]

> 現状のスクロール位置によって数字違うとか？？

その通りです。ブラウザが現在表示している左上が起点です。文書の左上ではありません。

[Ruri5280]

なるほどです。
要素がスクロールバーのどこにあっても、画面左端にしようと思うと
どうような考え方をすればよいでしょう、、、

[shinoharat]

> ハイフンの数が3本というよりは２本でマイナス79.625みたいです。

なるほどそういうことだったんですね。失礼しました。

> 要素の左端を画面の左端にしたいのですが、どうすれば良いでしょうか、、

css の「position: fixed;」または「position: sticky;」はどうですか？

[Ruri5280]

これってどうやって使えばいいのでしょう、、
position: fixed;にして　０にする感じでしょうか

[int32_t]

文書のスクロール状態に関わらず要素の位置を左端に固定したいのか、要素が左端に表示されるように文書をスクロールしたいのか、どちらでしょうか。
やりたいことを含めて質問文も更新した方がよいと思います。

[Ruri5280]

たくさんアドバイスいただいてありがとうございます

要素が左端に表示されるように文書をスクロールしたい感じです

今はjQueryで下記のように書いています

var slideid = $("#" + game_id + "").text();
var element = document.getElementById(slideid);
bounds = element.getBoundingClientRect().left + window.pageXOffset - (50 * 2);
$("#gvt-edd-grid-container").scrollLeft(bounds);

ただ、element.getBoundingClientRect().leftが現在の位置によってかわってしまうとなると
どうすれば良いのかわからなくなってしまいました、、

[int32_t]

ビューポートの他に #gvt-edd-grid-container というスクロールコンテナがあるのですね? そのコンテナの左端にしたいのですか、それとも本当にビューポートの左端ですか。

HTMLも含めて、質問を全体的に書き直すことをおすすめします。

[shinoharat]

先ほど回答を投稿したのですが、やりたいのは

> 要素が左端に表示されるように文書をスクロールしたい感じです

だったんですね。

> 文書のスクロール状態に関わらず要素の位置を左端に固定

の方を書いてしまいました。失礼しました。

[Ruri5280]

とんでもないです！
すごく参考になります！

Answer 1

要素の左端を画面の左端にしたいのですが、どうすれば良いでしょうか

固定したい要素に position left top を設定してみてはいかがでしょうか？

固定したい要素 {
  position: fixed;  /* 位置を固定にする。 */
  left: 0px;        /* 左端にくっつけたい時は left を 0 に指定。 */
  top: 150px;       /* 上からの位置はお好みの数値で。 */
}

  <main>
    <h1>サンプルです</h1>
    <div class="text">
      <p>これは position: fixed; のサンプルです。</p>
      <p>縦方向と横方向、どちらにどれだけスクロールしても、 水色の div 要素は常に左端に表示されるはずです。</p>
      <p>テストテストテストテストテストテストテストテストテストテスト</p>
      <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
      <p>ああああああああああああああああああ</p>
      <p>ああああああああああああああああああ</p>
      <p>ああああああああああああああああああ</p>
    </div>
    <div id="foo">固定したい要素</div>
  </main>

    main {
      width: 150vw;
      height: 200vh;
    }

    .text {
      margin: 20px;
      padding: 20px;
      width: 120vw;
      background-color: #aaa;
    }

    #foo {
      position: fixed;
      top: 150px;
      left: 0px;

      background-color: #8cf;
      width: 200px;
      height: 200px;
    }

Comments

[Ruri5280]

たくさんアドバイアスありがとうございました！

すごく強引な手段ですが、要素の位置を取得する前に、
一旦scrollLeft:0に戻してから取得するようにしたら、
ほぼチラつきもなく更新できました、、

$("#gvt-edd-grid-container").animate({scrollLeft:0}, { duration : 0});
var element = document.getElementById(slideid);
var bounds = element.getBoundingClientRect().left+ window.pageXOffset-(50*2);
$("#gvt-edd-grid-container").animate({scrollLeft:bounds + scroll_offset}, { duration : 0});

自分でもすごくレベルの低いことやってると思いますが、
取り急ぎ解決したので、今後じっっくり考えてみます
この度はありがとうございました！