feat(Tabs): Allow to scroll to selected tab #5957
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 5ec2e6e:
|
Codecov ReportAttention:
Additional details and impacted files@@ Coverage Diff @@
## master #5957 +/- ##
==========================================
- Coverage 79.16% 79.15% -0.02%
==========================================
Files 306 306
Lines 9548 9570 +22
Branches 3225 3231 +6
==========================================
+ Hits 7559 7575 +16
- Misses 1989 1995 +6
Flags with carried forward coverage won't be shown. Click here to find out more.
☔ View full report in Codecov by Sentry. |
Carefully turn the scroll on with the flag and allow to control scroll behavior with separate prop. Also turn off scroll on mount to avoid extra verticall scroll.
Disable vertical scroll when scrollIntoView will scroll try to scroll vertically as well. Update docs
mendrew
force-pushed
the
mendrew/feat/5870/Tabs/scroll-to-selected-tab
branch
from
5458cf3 to
9cf7e3d
Compare
size-limit report 📦
|
e2e tests |
👀 Docs deployed
Commit 5ec2e6e |
SevereCloud
reviewed
Oct 12, 2023
Only scroll when user selects the tab
SevereCloud
approved these changes
Oct 12, 2023
vkcom-publisher
pushed a commit
that referenced
this pull request
Oct 16, 2023
* Описание Добавляем возможность горизонтального скролла до активной вкладки. Используется функция [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView). Самое простое решение, но есть нюансы: 1) Вертикальный скролл не выключить На текущий момент нам надо скроллить только горизонтально, но [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) осуществляет как горизонтальный, так и вертикальный скролл и вертикальный скролл не выключить. Вертикально `scrollIntoView` не будет скроллить если используется значение `block: "nearest"` и при этом элемент находится в рамках видимой области. Почему вертикальный скролл это проблема? Достаточно представить что компонент`Tabs` находится где-то внизу страницы и не виден сразу, тогда при инициализации страницы может сработать вертикальный скролл до компонента `Tabs`. Чтобы избежать проблем с вертикальным скроллом мы не вызываем `scrollIntoView` если элемент вертикально не в зоне видимости. 2) Старые браузеры не поддерживают опции scrollBehavior Не все [старые браузеры](https://caniuse.com/?search=scrollintoview), перечисленные в нашем [.browserslistrc](https://github.com/VKCOM/VKUI/blob/30c6d400cdd354204cc05fa33aa5f43f24bea467/.browserslistrc) поддерживают используемые нами опции в `scrollIntoView`. Поэтому для таких бразеров скролл просто не будет работать, потому что вызов `scrollIntoView` с булевым флагом подразумевает вертикальное выравнивание, а значит страница тоже может скроллится, что не желательно. * Почему не использовать `scrollTo` или другие аналогичные методы вместо `scrollIntoView`? В целом можно, но VKUI позволяет располагать `TabItem` внутри `Tabs` достаточно свободно, `TabItem` можно обернуть в любое количество элементов, добавить дополнительных оберток для всего списка элементов, что усложняет логику для правильного просчёта величины на которую нужно проскролить, плюс усложняет определение самого элемента к которому нужно применить скролл. Можно будет рассмотреть такой вариант, если текущее решение нас не удовлетворит, но пока что лучше воспользоваться тем, что предлагает `scrollIntoView`. * Изменения Добавлено два новый пропа в компонент `Tabs`: - `withScrollToSelectedTab` для включения скролла до активной вкладки - `scrollBehaviorToSelectedTab` для выбора горизонтального выравнивания
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Описание
Добавляем возможность горизонтального скролла до активной вкладки.
Используется функция scrollIntoView.
Самое простое решение, но есть нюансы:
1) Вертикальный скролл не выключить
На текущий момент нам надо скроллить только горизонтально, но scrollIntoView осуществляет как горизонтальный, так и вертикальный скролл и вертикальный скролл не выключить. Вертикально
scrollIntoViewне будет скроллить если используется значениеblock: "nearest"и при этом элемент находится в рамках видимой области.Почему вертикальный скролл это проблема? Достаточно представить что компонент
Tabsнаходится где-то внизу страницы и не виден сразу, тогда при инициализации страницы может сработать вертикальный скролл до компонентаTabs.Чтобы избежать проблем с вертикальным скроллом мы не вызываем
scrollIntoViewесли элемент вертикально не в зоне видимости.2) Старые браузеры не поддерживают опции scrollBehavior
Не все старые браузеры, перечисленные в нашем .browserslistrc поддерживают используемые нами опции в
scrollIntoView. Поэтому для таких бразеров скролл просто не будет работать, потому что вызовscrollIntoViewс булевым флагом подразумевает вертикальное выравнивание, а значит страница тоже может скроллится, что не желательно.Почему не использовать
scrollToили другие аналогичные методы вместоscrollIntoView?В целом можно, но VKUI позволяет располагать
TabItemвнутриTabsдостаточно свободно,TabItemможно обернуть в любое количество элементов, добавить дополнительных оберток для всего списка элементов, что усложняет логику для правильного просчёта величины на которую нужно проскролить, плюс усложняет определение самого элемента к которому нужно применить скролл.Можно будет рассмотреть такой вариант, если текущее решение нас не удовлетворит, но пока что лучше воспользоваться тем, что предлагает
scrollIntoView.Изменения
Добавлено два новый пропа в компонент
Tabs:withScrollToSelectedTabдля включения скролла до активной вкладкиscrollBehaviorToSelectedTabдля выбора горизонтального выравнивания