Synchronizing scrolling between two tables

Help & Support 💻
1

I have one page, that mainly revolves around two tables. The content of the tables is related to each other and is in the same order. For a more fluid experience I synchronized the scrolling between the two tables like this

// get source_table and target_table DOM elements
let container = document.querySelector('.container')
const tables = container.querySelectorAll('.datatable-body');

if(tables.length !== 2) throw new Error("Found " + tables.length + " tables while trying to set scrollListener");

// source_scroll_max & target_scroll_max are defined in 'Custom Code' as global variables
source_scroll_max = tables[0].scrollHeight - tables[0].clientHeight;
target_scroll_max = tables[1].scrollHeight - tables[1].clientHeight;

let s_listener = () => {
  tables[1].scrollTop = target_scroll_max * roundTo(tables[0].scrollTop / source_scroll_max, 2); // roundTo is defined in 'custom code'
};
let t_listener = () => {
  tables[0].scrollTop = source_scroll_max * roundTo(tables[1].scrollTop / target_scroll_max, 2); // source_max * ( currentPos / target_max )
}

//tables[1].scrollTop = tables[0].scrollTop;
tables[0].addEventListener("scroll", s_listener);
tables[1].addEventListener("scroll", t_listener);

The roundTo() function rounds a float number to a certain amount of decimals, for those interested here’s the code

/*
 * Rounds a decimal point number to a certain number of places. Not 100% working for all cases due to how javascript works, but should cover 99% of them (and we dont actually need that perfect precision)
 * @param {number} num - Number to round
 * @param {number} 
 */
function roundTo(num, places) {
  if(!num || !places)
    throw new Error("Function 'roundTo' expects 2 parameters");
  if(typeof num !== 'number') {
  	if(typeof num === 'string')
      num = +num;
    else
      throw new Error("Parameter 'num' passed to function 'roundTo' must be either of type 'number' or 'string'");
  } else if(typeof places !== 'number') {
  	if(typeof places === 'string')
      places = +places;
    else
      throw new Error("Parameter 'places' passed to function 'roundTo' must be either of type 'number' or 'string'");
  }
  places = ~~places;
  return Math.round((num + Number.EPSILON) * Math.pow(10, places)) / Math.pow(10, places);
}

Now, this does indeed work and synchronizes the scrolling between the tables, but I’d like it to be more fluid. I tested this also in incognito mode, because all the extension and some other things that drain performance are disabled and it would be good enough there, but I’d like it to work with the same perfomance when using the browser normally.

That said, I don’t know if this problem is a general perfomance issue concerning UIBakery as a whole, something that could be improved by code or just can’t be done with better perfomance.

I know there is this thread about UIBakery and perfomance concerns, but I think that my code synchronizing the table’s scrolling is not really heavy on perfomance, so there might be something else that can be done.

2

Hey @Max

Let us check your workaround on our side, and then we will get back to you.

1 Like
3

Hi @Max

We were unable to set up a parallel scroll using your example code. Would you mind sending us a model with the example to support@uibakery.io?

Thanks!

1 Like