Кнопки прокрутки в угловом применении ⇐ CSS

[Anonymous]

[Извините за мой плохой английский] />

spec: H3>


Когда список переполнен < /code>, затем покажите правые /левые кнопки. < /li>
Когда там не переполнен, скрыть кнопки прокрутки. а также, когда значение Scrollleft имеет максимум, отключите правильную кнопку. H3>

шаблон:

Код: Выделить всё

{{i}}


⇦

⇨


< /code>

component:


export class AppComponent {
items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];

isOverflown(element: HTMLElement) {
return element.scrollWidth > element.clientWidth;
}

scroll(element: HTMLElement, direction: number) {
element.scrollLeft += 100 * direction;
}

canScrollStart(element: HTMLElement) {
return element.scrollLeft > 0;
}

canScrollEnd(element: HTMLElement) {
return element.scrollLeft < element.scrollWidth;
}
}

< /code>

css:

/* The rest of css see on staclblitz */

#scroll-left{
order: -1; /* To pevent ExpressionChangedAfterItHasBeenCheckedError */
}

Stackblitz: https://stackblitz.com/edit/my-angular-scroll

Справка i Потребность: < /h3>


Я чувствую, что мое решение очень уродливо. , это не обновляет состояние кнопок. Я могу слушать все события, но я не знаю, как лучше всего сделать. < /Li>
Я не знаю, как отключить правильную кнопку, когда Scrollleft значение максимально. разрешено. Спасибо @void spirit < /li>
< /ul>

thenk you за любым помощью. < /P>

Подробнее здесь: https://stackoverflow.com/questions/591 ... pplication