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

Question

[Петр Питерский]

Есть пример таблицы, у которой фиксируется шапка (нет использовать просто sticky не получается из-а внутреннего overflow), при скроле шапка начинается дергаться, возможно ли это избежать? (пробелма в mozilla, мобильной chrome, старая opera, и iOS)

Comments

[Виталий Першин]

sticky js в поиске вбей, есть куча хороших библиотек, которые умеют, то что ты хочешь.

[Петр Питерский]

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

[szQocks]

Петр Питерский, top изменяй а не translateY + добавь will-change: top; для header, трансформация анимирует и фон, что тоже влияет на производительность

[ksnk]

transition: transform 0.16s linear, opacity 0.16s linear;

Вот это правило ты зачем вообще используешь? Именно оно и говорит - "скачи".

[Ankhena]

Петр Питерский,

они в основном просто лупят positing fixed который мне ломает поток и внешний вид таблицы

Что именно он вам ломает?
Когда шапка таблицы исчезает, то делаете fixed и прибиваете к верху окна. У вас и сейчас там шапка, только пересчитываете всё постоянно зачем-то. При обратном скролле убираете. Процесс ничем не отличается от липкой шапки на js.
И, может быть, имеет смысл что-то сделать с семантикой, сейчас выглядит дико.

Альтернатива: делать скролл вокруг самой "таблицы" и обычный sticky. Ну и в table переделать.

[Петр Питерский]

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

[Петр Питерский]

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

[szQocks]

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

а потом всем таблицам поменять структуру

[Петр Питерский]

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

[szQocks]

Петр Питерский, видимо у нас разные понятия у изменении структуры ( вид останется такой же, но сами HTML будут немного другими )

[szQocks]

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

[Петр Питерский]

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

[szQocks]

Петр Питерский,

И что даст изменение структуры?

поэкспериментировать посмотреть если варианты решения, если не поможет, как вариант синхронизировать скроллы уже по X, в общем вариантов куча, тут можно днями сидеть и проверять разные варианты , пока не сделаешь идеал

но я бы убрал transition тут +

top изменяй а не translateY + добавь will-change: top; для header, трансформация анимирует и фон, что тоже влияет на производительность

+ стили бы поправил на нормальные и всё, и не парился бы

[Петр Питерский]

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

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

[szQocks]

Петр Питерский,

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

к сожалению результат тот же

это я уже слышал, и говорю что - оставь как есть) прыгает но не везде

position: fixed

а и не надо fixed, fixed от document работает, так же через стики но по другому сверстать и синхронизировать скроллы по процентам, при скролле просто двигаешь блоки на 1% или 2% каждый ( имею ввиду 2 горизонтальных скролла ), тогда он будет синхронизирован, в общем я тут всё, удачи в решении

upd: fixed тоже как вариант, не ток от document работает, туплю

[Петр Питерский]

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

[szQocks]

Петр Питерский, https://codepen.io/kapysta-xxl/pen/VwoaJeL

[Петр Питерский]

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

[Петр Питерский]

[szQocks]

Петр Питерский,

сверстать и синхронизировать скроллы по процентам, при скролле просто двигаешь блоки на 1% или 2% каждый ( имею ввиду 2 горизонтальных скролла )

Answer 1

[Aetae]

Если использовать position: sticky в css, который именно для этого и предусмотрен, нельзя, то сделай так чтоб было можно. Потому что это единственный реально адекватный вариант, а какие-то там проблемы с твоим overflow - это твой косяк, который и надо решать.

С программным изменением позиции оно всегда будет "дёргаться" без вариантов. До того как появилось sticky - это решали хитрой вёрсткой, где "на самом деле" никакая позиция не меняется, а fixed(а ещё раньше absolute) дубликат элемента показывали\скрывали по условию.

P.S. Возможно можно что-то плавное изобразить при помощи requestAnimationFrame и getBoundingClientRect, не привязываясь к событию scroll, но не пробовал ибо не нужно.

Comments

[Петр Питерский]

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

Answer 2

[Сергей delphinpro]

Просто уберите transition

Comments

[Петр Питерский]

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