[BREAKING CHANGE][CustomScrollView]: перейти на CSS-way решение для стилизации ползунка

[inomdzhon]

Так как дизайн никак не документирует поведение полосы прокрутки и его ползунка, необходимо перейти на использование системного поведения, тем самым облегчить компонент CustomScrollView застилизовав его через CSS (https://caniuse.com/css-scrollbar).

Из BREAKING CHANGE это удаление параметров TrackerOptionsProps.

Преимущества

1. удалим DOM-элемет(-ы);

   Их может быть два если включить и горизонтальный, и вертикальный скроллы.
   На самом деле их больше чем два, а может остаться только один

2. удалим обработчики событий onwheel, onmousedown, onmouseleave, ondragstart, ondragstop;

3. удалим использование тяжёлого useResizeObserver(), что в целом улучшит производительность страницы, где используется CustomScrollView;

4. предупредим баги связанные с кастомным ползунком.

   Например, сейчас у ползунка отсутствует взаимодействик на тач-события.
   Вообще все нативные решения намного более устойчивы к багам

5. Удалим кучу лишнего кода, компонент станет максимально простым

Нюансы

1. Останется проблема, что в Firefox < 64 будет обычный скролл, а не застилизованный

VKUI/packages/vkui/src/components/CustomScrollView/CustomScrollView.module.css

Lines 129 to 135 in ccb6246

	.hasPointerTrue .box {
	/**
	* Для удаление скролла в Firefox.
	* В версии ниже 64 будет виден скролл, но это не ломает функциональность.
	*/
	scrollbar-width: none;
	}

2. Есть два способа кастомизации:

• используя относительно новые свойства scrollbar-color и scrollbar-width у этих свойств поддержка в браузерах такая себе, в основном хорошо поддерживается в firefox, но например абсолютно не поддерживается в Safari
• использую нестандартные свойства с префиксом -webkit-.. такие как -webkit-scrollbar у этих свойств ситуация противоположная. Поддержка говорит, что поддерживается хорошо везде, кроме Firefox(там вообще нет)
  Исходя из этого надо использовать оба подхода сразу, чтобы покрыть все браузеры. НО, если браузер поддерживает оба способа кастомизации скролла(например последние версии Chrome) то первый способ будет полностью перебивать второй. Возможно не так критично, но все же не всегда очевидно

4. Есть проблема с кастомизацией. Через scrollbar-color, scrollbar-width особо не кастомизировать ничего кроме цвета и ширины(причем только 2 варианта размера есть). А также если кастомизировать через webkit псевдоклассы, то там возможностей побольше, но все равно не идеально. Например плавное изменение размера или смена фону при наведении на thumb реализовать невозможно. Будет меняться довольно резко. И кстати смену размера можно сделать только через небольшой костыль с бордерами.

5. Также при кастомизации через ::webkit у thumb нельзя задать opacity, но можно задать сразу цвет с прозрачностью. В таком случае надо добавлять такой токен, или искать более менее подходящий для этого из имеющихся. Сейчас используется токен без прозрачности и добавляется прозрачность через opacity

6. Нельзя сделать реально прозрачным пространство под thumb, то есть scrollbar-track. Даже если задать цвет transparent, он все равно будет сполшным белым и будет наезжать на контент

Ссылки

• CSS Tricks • scrollbar
• Developer Mozilla • CSS scrollbars styling

[qurle]

Было бы клёво предупредить о кейсах, где нативные скроллбары немного всё сломают.
Например, скролл теперь не сможет быть поверх контента, а скачки ширины вьюпорта при появлении оверфлоу станут неизбежными.

[vkcom-publisher]

✅ v7.0.0-beta.1 🎉

[vkcom-publisher]

✅ v7.0.0 🎉