Загрузка данных


(() => {
  const root = document.querySelector('.flow-sql-editor-root');
  const sidebar = root.querySelector('[class*="z-50"]');
  const sc = [...root.querySelectorAll('*')].find(e => {
    const s = getComputedStyle(e);
    return /(auto|scroll)/.test(s.overflowY) && e.scrollHeight > e.clientHeight + 1;
  });
  const steps = [
    ['без изменений (контроль)', () => {}],
    ['backdrop-filter выключен', () => root.querySelectorAll('[class*="backdrop"]')
      .forEach(e => { e.style.backdropFilter = 'none'; e.style.webkitBackdropFilter = 'none'; })],
    ['сайдбар в свой слой', () => { sidebar.style.willChange = 'transform'; }],
    ['скроллер в свой слой', () => { sc.style.willChange = 'scroll-position'; sc.style.transform = 'translateZ(0)'; }],
    ['канва react-flow скрыта', () => root.querySelectorAll('.react-flow')
      .forEach(n => { n.parentElement.style.display = 'none'; })],
    ['высота редактора в px', () => { root.style.height = root.getBoundingClientRect().height + 'px'; }],
  ];
  let i = 0;
  console.log(`шаг 1/${steps.length}: ${steps[0][0]} — крути вниз`);
  addEventListener('wheel', (e) => {
    if (e.deltaY <= 0) return;
    const before = sc.scrollTop;
    setTimeout(() => {
      console.log((sc.scrollTop - before ? '✅ РАБОТАЕТ — ' : '❌ не крутится — ') + steps[i][0]);
      if (++i >= steps.length) return console.log('кандидаты кончились, ни один не помог');
      sc.scrollTop = 0;
      steps[i][1]();
      console.log(`шаг ${i + 1}/${steps.length}: ${steps[i][0]} — крути вниз ещё раз`);
    }, 350);
  }, false);
})();