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

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

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

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

該当のソースコード

JS
1
2setInterval((function() {
3
4    $.ajax({
5        type: "post",
6        dataType: "json",
7        url: '<?php echo admin_url('admin-ajax.php'); ?>',
8        data: {
9            //Action
10            action: "loadpost",
11            math_id: <?php echo $terms_id; ?>,
12        },
13        context: this,
14        success: function(response) {
15            if (response.success) {
16
17                $('#gvt-edd-grid-container').html(response.data);
18
19                //スクロールしたい要素のID
20                var slideid = $("#" + game_id + "").text();
21                var element = document.getElementById(slideid);
22                bounds = element.getBoundingClientRect().left + window.pageXOffset - (50 * 2);
23                console.log(element + "--" + bounds);
24
25            } else {
26                console.log(response);
27            }
28        },
29        error: function(jqXHR, textStatus, errorThrown) {
30            console.log('loadpost error occured: ' + textStatus, errorThrown);
31        }
32    })
33    return false;
34}), 3000)

試したこと

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

shinoharat

2023/05/26 02:12

質問文の以下の部分がよくわかりません。書いてあるログを見る限り、値は常に 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

2023/05/26 02:22

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

Ruri5280

2023/05/26 02:37

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

shinoharat

2023/05/26 02:58

79.625 の方はハイフンの数が3本なので、別の console.log な気がしますが、どうですか？試しにコードを console.log(element + "--test--" + bounds); に変えたら、79.625 側の表示も変わりますか？

Ruri5280

2023/05/26 03:19

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

int32_t

2023/05/26 03:25

> 現状のスクロール位置によって数字違うとか？？その通りです。ブラウザが現在表示している左上が起点です。文書の左上ではありません。

Ruri5280

2023/05/26 03:43

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

shinoharat

2023/05/26 03:48

> ハイフンの数が3本というよりは２本でマイナス79.625みたいです。なるほどそういうことだったんですね。失礼しました。 > 要素の左端を画面の左端にしたいのですが、どうすれば良いでしょうか、、 css の「position: fixed;」または「position: sticky;」はどうですか？

Ruri5280

2023/05/26 04:09

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

int32_t

2023/05/26 04:37

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

Ruri5280

2023/05/26 04:52

たくさんアドバイスいただいてありがとうございます要素が左端に表示されるように文書をスクロールしたい感じです今は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

2023/05/26 05:10

ビューポートの他に #gvt-edd-grid-container というスクロールコンテナがあるのですね? そのコンテナの左端にしたいのですか、それとも本当にビューポートの左端ですか。 HTMLも含めて、質問を全体的に書き直すことをおすすめします。

shinoharat

2023/05/26 05:17

先ほど回答を投稿したのですが、やりたいのは > 要素が左端に表示されるように文書をスクロールしたい感じですだったんですね。 > 文書のスクロール状態に関わらず要素の位置を左端に固定の方を書いてしまいました。失礼しました。

Ruri5280

2023/05/26 05:34

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

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

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

css
1    main {
2      width: 150vw;
3      height: 200vh;
4    }
5
6    .text {
7      margin: 20px;
8      padding: 20px;
9      width: 120vw;
10      background-color: #aaa;
11    }
12
13    #foo {
14      position: fixed;
15      top: 150px;
16      left: 0px;
17
18      background-color: #8cf;
19      width: 200px;
20      height: 200px;
21    }

投稿2023/05/26 05:13

shinoharat

総合スコア1685

Ruri5280

2023/05/26 05:53

たくさんアドバイアスありがとうございました！すごく強引な手段ですが、要素の位置を取得する前に、一旦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}); 自分でもすごくレベルの低いことやってると思いますが、取り急ぎ解決したので、今後じっっくり考えてみますこの度はありがとうございました！

行動規範の内容に同意します