雑ですが、以下のような構成の画面を作ろうとしています。
緑の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文には入っているのですが、
スクロールバーが戻ってくれませんでした・・・。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。