Smooth cross-browser diagonal scrolling with jQuery

Question

Depending on the vertical scrolling of the page I move a <div> called container horizontally:

scrollElement.scroll(function() {
    var offsetLeft = scrollElement.scrollTop() / x;
    container.css({ left: offsetLeft  + 'px' });
});

This successfully creates a diagonal scrolling effect when the user scrolls vertically.

The scrolling is barely acceptable in Firefox but very jumpy in Google Chrome: Chrome fails to sync the movement on the x- and the y-axis when you scroll too quickly and therefore first scrolls down and then adjusts the x-offset. Firefox however just lags when you scroll too quickly.

Is there a better way to implement this "diagonal scrolling"? Is it possible to make it more smooth?

I basically want the div not to scroll too far down without correcting the x-coordinates every time.

Answer 1

You could try it as an animation instead of setting the CSS for the container offset directly.

scrollElement.scroll(function() {
  var offsetLeft = scrollElement.scrollTop() / x;

  container.stop(true, false); // Stop the current animation, likely
                               // caused by a previous scroll event fire.
  container.animate({ left: offsetLeft  + 'px' });
});