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

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

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

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

jQuery

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

Q&A

解決済

1回答

8110閲覧

横幅が違うdivのスクロールを連動させたい

SystemAjisai

総合スコア171

JavaScript

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

jQuery

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

0グッド

1クリップ

投稿2017/06/21 06:00

雑ですが、以下のような構成の画面を作ろうとしています。

緑のdivはオレンジのdivの列ヘッダーのため、オレンジの横スクロールに合わせて一緒にスクロールするようにしています。
横スクロールの連動は、以下のように実装しています。

html

1<div id="緑div"> 2 <div class="マス目"></div> 3 <div class="マス目"></div> 4 : 5</div> 6<div id="オレンジdiv"> 7 <div class="マス目"></div> 8 <div class="マス目"></div> 9 : 10</div>

css

1緑div{ 2 overflow: hidden; 3 border-right : 19px solid #ccc; // 横スクロールバーの分 4} 5オレンジdiv{ 6 height:600px; 7 overflow: auto; 8}

javascript

1 $(オレンジdiv).scroll(function(){ 2 $this = $(this); 3 $(緑div).scrollLeft($this.scrollLeft()); 4 });

困っていること

オレンジdivの幅が可変のため、緑divより横幅が大きくなってしまった場合に、右端までスクロールするとヘッダーがずれてしまいます。

右端までスクロールしても緑divがズレないようにするため、何かいい方法はないでしょうか。
とにかくズレなければいいので、オレンジdivがはみ出している部分にはヘッダー(緑div)は無くても問題ありません。
イメージ説明

試したこと

●緑divの横幅をオレンジdivにそろえる作戦

javascript

1 $(オレンジdiv).scroll(function(){ 2 $this = $(this); 3 // 横幅をそろえる 4 $(緑div).width($this[0].scrollWidth); 5 $(緑div).scrollLeft($this.scrollLeft()); 6 });

なぜかわかりませんが、緑divが横スクロールしなくなってしまいました。

●緑divの横幅までスクロールしたらそれ以上右に行かせない作戦

javascript

1 $(オレンジdiv).scroll(function(){ 2 $this = $(this); 3 // 一旦横スクロールを連動させる 4 $(緑div).scrollLeft($this.scrollLeft()); 5 // 緑divの右端を通り越してないかのチェック 6 var scrollWidth = $(緑div)[0].scrollWidth; 7 var left = $(緑div).width() + $(緑div).scrollLeft(); 8 if((scrollWidth -left) / scrollWidth <= 0){ 9 // 緑の一番右端を超えた! 10 // 右端の数字がわからないので、試験的に500ぐらい戻してみる 11 $this.scrollLeft(left-500); 12 $(緑div).scrollLeft($this.scrollLeft()); 13 } 14 });

デバッグするとちゃんと右端判定のif文には入っているのですが、
スクロールバーが戻ってくれませんでした・・・。

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

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

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

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

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

guest

回答1

0

自己解決

いまさらながら自己解決しました。

javascript

1 $(オレンジdiv).scroll(function(){ 2 $this = $(this); 3 // 一旦横スクロールを連動させる 4 $(緑div).scrollLeft($this.scrollLeft()); 5 // 緑divの右端を通り越してないかのチェック 6 var scrollWidth = $(緑div)[0].scrollWidth; 7 var left = $(緑div).width() + $(緑div).scrollLeft(); 8 if((scrollWidth -left) / scrollWidth <= 0){ 9 // 緑の一番右端を超えた! 10 // window幅分を引いた位置に調整する 11 $this.scrollLeft(left-window.innerWidth); 12 $(緑div).scrollLeft($this.scrollLeft()); 13 } 14 });

質問に記載していた、
「緑divの横幅までスクロールしたらそれ以上右に行かせない作戦」
で、ヘッダー部の一番右端までスクロールしたら、現在のスクロール位置からwindow幅を引いた分だけ戻すようにしたら、理想の動きになりました。

当初、どのぐらい引いたらいいのかわからず500とか1000適当な数字を入れていたのですが、ふと時々うまく動いていることに気がつきました。
カンで「もしかして動かしてるときのWindowサイズか?」とあたりをつけて、winodw幅を引くようにしてみたらうまく動きました。

算数力のない私にはなぜこれで動いたのか理解できないし、汎用的な解なのかもよくわかりませんが、とりあえずこれでクローズにします。

投稿2017/07/05 00:31

SystemAjisai

総合スコア171

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問