質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1486閲覧

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

Ruri5280

総合スコア309

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2023/05/26 01:23

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

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

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

[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)

試したこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shinoharat

2023/05/26 02:12

質問文の以下の部分がよくわかりません。 書いてあるログを見る限り、値は常に 867.875 で、増えているようには見えないのですが・・・? > element.getBoundingClientRect().left で取得するごとに数値が大きく異なります() > > 手動でリロードすると毎回867.875なのですが > タイマーでajaxを投げると下記のように2回ずつ下記のようなログが取得されます > > [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本というよりは2本でマイナス79.625みたいです。 要素の左端を画面の左端にしたいのですが、どうすれば良いでしょうか、、
int32_t

2023/05/26 03:25

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

2023/05/26 03:43

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

2023/05/26 03:48

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

2023/05/26 04:09

これってどうやって使えばいいのでしょう、、 position: fixed;にして 0にする感じでしょうか
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

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

回答1

0

ベストアンサー

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

固定したい要素に 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

総合スコア1674

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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}); 自分でもすごくレベルの低いことやってると思いますが、 取り急ぎ解決したので、今後じっっくり考えてみます この度はありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問