Javascript - find when scrolled to the end of the page - firefox

I have a div that contains a few pictures, using javascript i scroll left and right in that div, my problem is that for some reason in firefox the values are different that in chrome (works fine):

function scroll_right() {
  document.getElementById('left').style.opacity = '1';
  document.getElementById('left').style.filter = 'alpha(opacity=100)';
  document.getElementById('scroller').scrollLeft += PixelPerInterval;
  if (!stop) t = setTimeout('scroll_right()', 10);
  else stop = false;
  scrX = document.getElementById('scroller').scrollLeft;
  pwidth = document.getElementById('cont').clientWidth;
  awidth = document.getElementById('cont').scrollWidth;
  //document.getElementById('type').innerHTML = scrX + ' ' + (awidth-pwidth);
  if (scrX >= awidth - pwidth) {
    //type.innerHTML = scrX + ' right';
    document.getElementById('right').style.opacity = '0.4';
    document.getElementById('right').style.filter = 'alpha(opacity=40)';
  }
}

using scroll_left it's easy, just have scrX = 0. The outer container is called scroller its width is fixed, and the inner container is called cont and its width isn't set by the user so unlimited pictures can be entered.

Any ideas? (without using jquery).

thanks alot.

Btw html code:

<img src="left.png" id="left" onmouseover="scroll_left();" onmouseout="stop_scroll();" />
<div id="scroller">
  <div id="cont">
    <a onclick="main(this);" href="#">
      <img class="thumb" id="persp" src="sport/911-persp.png" alt="persp" />
    </a>
    <a onclick="main(this);" href="#">
      <img class="thumb" id=&开发者_如何学Cquot;side" src="sport/911-side.png" alt="side" />
    </a>
    <a onclick="main(this);" href="#">
      <img class="thumb" id="front" src="sport/911-front.png" alt="front" />
    </a>
  </div>
</div>
<img src="right.png" id="right" onmouseover="scroll_right();" onmouseout="stop_scroll();" />