Skip to content

[Feature] Компонент ScrollSaver #3750

@SevereCloud

Description

@SevereCloud

В VKUI есть такая интересная тема, как запоминание позиции скролла панели, когда идешь вперед по истории и его восстановление, когда возвращаешься назад.

Но это работает именно со скроллом панели, но на панели могут быть и собственные сколящиеся боксы (css overflow scroll), которые так не умеют, а хотелось бы

Необходимо сделать компонет-обертку, который бы запоминал позицию скролла элемента и мог восстановить, при возвращении по истории назад.

Почему не хук

  • гораздо легче получить контекст панели внутри панели.
  • можно сразу добавлять несколько компонентов в панель и не заботиться о создании ref'a под каждый случай, так как ref ScrollSaver будет получить из children.
  • можно использовать только под условие
  • кол-во ScrollSaver может быть динамическим.

Требования

  • Интерфейc:
interface ScrollSaverProps {
/* Уникальный идентификатор элемента скролл которго надо запомнить 
Важно иметь id, так как возможно что на одной панели нужно запомнить позицию нескольких элементов. Два HorizontalScroll */
id: string;
/* Если передан реакт-компонент, то он должен поддерживать getRootRef. */
children: React.ReactElement;
/* Режим сохранения скролла: по умолчанию `forward` - позиция скролла сохраняется только при переходе вперёд. */
saveMode: 'forward' | 'always';
}
  • важно добавлять уникальности в пределах панели/view.

  • иметь возможность управлять политикой сохранения позиции скролла - saveMode.

Metadata

Metadata

Type

No type

Projects

Status

🔜 To do

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions