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

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

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

html
<div id="緑div">
  <div class="マス目"></div>
  <div class="マス目"></div>
   :
</div>
<div id="オレンジdiv">
  <div class="マス目"></div>
  <div class="マス目"></div>
   :
</div>

css
緑div{
	overflow: hidden;
	border-right : 19px solid #ccc; // 横スクロールバーの分
}
オレンジdiv{
	height:600px;
	overflow: auto;
}

javascript
 $(オレンジdiv).scroll(function(){
	$this = $(this);
	$(緑div).scrollLeft($this.scrollLeft());
 });

困っていること

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

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

試したこと

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

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

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

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

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