## How to Achieve Smooth and Reliable Synchronized Scrolling with jQuery in Firefox?

Synchronized Scrolling Optimization and Firefox Resolution

When implementing synchronized scrolling using jQuery, it's crucial to address two potential issues:

1. Size Disparity Synchronization

To account for varying DIV sizes, determine the percentage of scrolled content:

percentage = element.scrollTop / (element.scrollHeight - element.offsetHeight)

Multiply the other DIV's (scrollHeight - offsetHeight) by this percentage to achieve proportional scrolling.

2. Firefox Scroll Loop

Firefox may trigger an infinite loop of scroll events. To prevent this, temporarily unbind the listener, set the scrollTop, and rebind it:

<code class="javascript">var $divs = $('#div1, #div2');
var sync = function(e){
    var $other = $divs.not(this).off('scroll'), other = $other.get(0);
    var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
    other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
    setTimeout( function(){ $other.on('scroll', sync ); },10);
}
$divs.on( 'scroll', sync);</code>

This approach smooths out scrolling in Firefox and prevents the infinite loop issue. A live demonstration is available at:

[http://jsfiddle.net/b75KZ/5/](http://jsfiddle.net/b75KZ/5/)

The above is the detailed content of ## How to Achieve Smooth and Reliable Synchronized Scrolling with jQuery in Firefox?. For more information, please follow other related articles on the PHP Chinese website!