Как избежать скачков header с использование scroll и transform?

szQocks, В вашем варианте не срколится шапка вместте с данными при горизонтальном скроле(

Как избежать скачков header с использование scroll и transform?

szQocks, это я уже слышал, и говорю что - оставь как есть) прыгает но не везде - да это факт, но вот в мобильных браузерах прыгает везде( а для этого и делается
Sticky не работает если если родитель имеет overflow

Как избежать скачков header с использование scroll и transform?

szQocks,
1) Добавил will-change: top; для header
2) изменил на top

к сожалению результат тот же,
пробовал так же делать position: fixed, но там свои проблемы первое шапка не в потоке, и не совсем скролы синхронизируются, плюс сама шапка теряет все стили, надо во-что обёртывать шапку, там результат еще хуже по итогу, но зато шапка не "прыгает")

Как избежать скачков header с использование scroll и transform?

И что даст изменение структуры?
Если шапка и данные должны едино горизонтально скролиться, то есть должны быть в одной потоке варинат шапки с fixed не прокатит так как это выпадает из потока и горизонтальный скрол перестаёт работать для шапки.

Как избежать скачков header с использование scroll и transform?

Структуру менять нельзя необходимо использовать текущее, плюс обязательно скрол и данных таблицы и заголовка таблицы

Как избежать скачков header с использование scroll и transform?

ksnk, это правило делает скачки более плавными, сейчас убрал, результат тот же самый

Как избежать скачков header с использование scroll и transform?

szQocks, Прбовал изначально TOP тоже самое

Как избежать скачков header с использование scroll и transform?

Если просто убрать то дергаться будет не плавно, убрал (можете глянуть на результат)

Как избежать скачков header с использование scroll и transform?

Пробовал requestAnimationFrame (тот же результат), position: sticky к сожалению не работает потому что родитель имеет overflow, горизонтальный скрол.

Как избежать скачков header с использование scroll и transform?

они в основном просто лупят positing fixed который мне ломает поток и внешний вид таблицы
во всяком случае этот https://github.com/rgalus/sticky-js/blob/master/di...

Как зафиксировать шапку у таблицы?

Пример

Вот посмотрите, что требуется

Как зафиксировать шапку у таблицы?

szQocks, задача такая, так как все таблицы сверстаны именно с такой структурой

Как зафиксировать шапку у таблицы?

szQocks, Нельзя менять структуру HTML таблицы, максимум обернуть таблицу во что-то, вариант

Как зафиксировать шапку у таблицы?

szQocks, ну как так, а где горизонтальный скрол и сама таблица должна быть ограниченно ширины

Как зафиксировать шапку у таблицы?

Делал через IntersectionObserver и добавлял к шапке fixed, да она сидит где надо, но проблема, что при скроле таблицы шапка уже не скролится(

Как отцентировать текст внутри div?

Пробовал не помогает(

Как зафиксировать первую колонку на CSS?

Попробовал тоже самое со временем уходит, может зависит что на мобильных устройствах это свойство по другому работает

Как выровнять заголовок в списке?

Спасибо, сработало!

Как выровнять заголовок в списке?

imko, Можете код привести рабочий? всё что вы сказали я попробовал не работает.