Кастомный скроллбар в Angular

[pepelsbey]

Обожаю современный веб: пишешь не на Angular? Проходи мимо, код для тебя бесполезен. Отсюда и ценность статьи — чуть выше, чем «как сложить 2+2 на jQuery».

[IgosYee]

Для тех кто меняет скролбар и выделение приготовлен отдельный котёл...

[Ahen]

И поведение при скролле (все эти лендинги с плавной прокруткой и прочее).

[lovermann]

Если речь не о каких-то неюзерфрендли веб-приложениях, то менять скрол-бар по мне это зло. К машине тоже можно приделать пропеллер на крышу, но зачем?

[Innoel]

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

[Waterplea]

Честно говоря, не очень понимаю, в чём преимущество тянуть ползунок, по сравнению с тянуть контент на телефоне, но поскольку это кастомный скроллбар, тут, как раз, такое поведение вполне можно реализовать, просто задачи такой не стояло. Возможно достаточно будет заменить события мышки на тачи и, соответственно, координаты будут браться по другому. Возможно как-то иначе. В любом случае, это просто DIV`ы, на которых слушаются события и сделать можно всё, что хочется.

[Ahen]

Когда контента очень много и принято его полностью загружать (например тред на борде в 500+ постов), хочется тянуть за скроллбар. Кнопки быстрого перемещения обычно скроллят строго к первому либо последнему посту, а мне вот вдруг в середину захотелось.

[amakhrov]

Смешанные чувства, однако.
С одной стороны — прикольно.
С другой — заявлена декларативность, но механика скроллинга все равно через прямую работу с nativeElement. А раз так, то зачем это все? Не будет ли проще в директиве напрямую повесить nativeElement.addEventListener / document.addEventListener и сразу автоматом избавиться от нежелательного change detection? Тогда и .silent не надо с обвеской из декораторов.

[Waterplea]

Ну тут без работы со свойствами nativeElement никак. Мне кажется довольно прозрачно и наглядно получилось, в целом немного императива. Вообще я думал, что через директиву будет запутаннее для статьи, поэтому не стал её делать, но сейчас переписал на директиву и стало совсем классно (через один аутпут из fromEvent):
stackblitz.com/edit/angular-scrollbar-component-directive?file=src/app/scrollbar/draggable.directive.ts
Спасибо за коммент :) Добавлю в статью.

[amakhrov]

Годно! Как по мне, observable сам по себе достаточно декларативен.

[mair000000000n]

Иногда тебе просто говорят, что это нужно сделать и деваться некуда. Такой вопрос: будет ли продолжение с реализацией такого скроллбара, которых бы делал свою магию при динамическом создании и обёртывании элементов? Помог бы при работе со всякими материаловскими таблицами или wijmo

[Waterplea]

Только что немного обновил код, вынеся логику в директиву. А что не так с динамическим созданием? Можешь показать пример с кодом, где это нужно и как оно нужно?