Detecting horizontal scrollbars

JavaScript
1

Hello peoples,

I have mangled up the following to add fixed position left/right scroll links to a horizontal scrolling site:

$(document).ready(function() {
  $('#container').append('<ul class="scroll_controllers"><li class="left"><a href="#" title="Scroll Left">&laquo;</a></li><li class="right"><a href="#" title="Scroll Right">&raquo;</a></li></ul>');
  $('.right a').click( function(){
    $.scrollTo( '+=600px', 900, {axis:'x'} );
    return false;
  });
  $('.left a').click( function() {
    $.scrollTo( '-=600px', 900, {axis:'x'} );
    return false;
  });
});

I’d really like to make it conditional on there being a need to scroll. Any idea what the best way to detect this would be?

Thanks in advance,

Rick

2 
//scrol 1px to the left
$(document).scrollLeft(1);

//check if it scrolled
// if this is 0 than jQuery was not able to scroll to left
// because there is no posibility to (no scroll bar)
if($(document).scrollLeft() != 0){
// x-scroll
alert('there is a horizontal scroll bar\
 you must have a small screen');
}else{
// no x-scroll
alert('there is NO a horizontal scroll bar');
}

//scroll back to original location
$(document).scrollLeft(0);

that should work
Ind It is quite invisible

note: only tested it in chrome, but it should work in the others

3

Ha! That works like a charm. I had been looking at ways to detect the presence of a scroll bar by calculating element sizes vs. window/viewport size etc etc and it was all getting very convoluted! I didn’t think to just scroll the damn thing! Thanks!

Rick