How to Achieve Smooth and Proportional Synchronized Scrolling in jQuery: A Solution to the Firefox Lag Issue?

Synchronized Scrolling Dilemma in jQuery: Achieving Smooth and Proportional Scrolling

Implementing synchronized scrolling can be a challenge when dealing with elements of different sizes. To address this, you need to determine the percentage of scrolled content and calculate the corresponding scrollTop value for the other element.

In your case, you can utilize this formula: scrollTop / (scrollHeight - offsetHeight). This yields a value between 0 and 1, which represents the percentage of the element that has been scrolled.

Moreover, you can encounter an issue where scrolling in Firefox becomes sluggish. This stems from the fact that your current code inadvertently creates a ceaseless loop of scroll events. Using off() to temporarily unbind the listener, adjusting the scrollTop, and then rebinding it can resolve this problem.

Here's an optimized code snippet that addresses both issues:

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);
    
    // Firefox workaround: Rebinding without delay is insufficient.
    setTimeout( function(){ $other.on('scroll', sync ); },10);
}

$divs.on( 'scroll', sync);

This code ensures proportional scrolling while preventing the infinite loop of scroll events in Firefox. To view a working demonstration, visit this jsfiddle: http://jsfiddle.net/b75KZ/5/

The above is the detailed content of How to Achieve Smooth and Proportional Synchronized Scrolling in jQuery: A Solution to the Firefox Lag Issue?. For more information, please follow other related articles on the PHP Chinese website!