Чтобы показать и скрыть полосу прокрутки при наведении курсора мыши в приложении Angular, вы можете использовать несколько методов. Вот несколько возможных подходов:

1. CSS-решение:

   • Для достижения этого эффекта можно использовать CSS, выбрав прокручиваемый элемент и настроив его свойство переполнения при наведении курсора. Вот пример:

   .scrollable-element {
    overflow: auto;
   }
   
   .scrollable-element:hover {
    overflow: hidden;
   }

2. Директивное решение:

   • Вы можете создать собственную директиву в Angular для управления логикой отображения/скрытия. Директива может прослушивать события наведения и соответствующим образом изменять класс или стиль CSS элемента. Вот пример:

   import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
   
   @Directive({
    selector: '[appHoverScrollbar]'
   })
   export class HoverScrollbarDirective {
    constructor(private elementRef: ElementRef, private renderer: Renderer2) { }
   
    @HostListener('mouseenter')
    onMouseEnter() {
      this.renderer.setStyle(this.elementRef.nativeElement, 'overflow', 'hidden');
    }
   
    @HostListener('mouseleave')
    onMouseLeave() {
      this.renderer.setStyle(this.elementRef.nativeElement, 'overflow', 'auto');
    }
   }

   Вы можете применить директиву appHoverScrollbarк нужному прокручиваемому элементу в шаблонах Angular.

3. Решение на основе JavaScript:

   • Если вы предпочитаете использовать JavaScript, вы можете добиться желаемого эффекта, добавив прослушиватели событий к элементу и изменив его стиль при наведении курсора. Вот пример:

   import { Component, ElementRef, ViewChild } from '@angular/core';
   
   @Component({
    selector: 'app-scrollable',
    template: `
      <div #scrollableElement class="scrollable-element">...</div>
    `
   })
   export class ScrollableComponent {
    @ViewChild('scrollableElement') scrollableElement: ElementRef;
   
    ngAfterViewInit() {
      const element = this.scrollableElement.nativeElement;
   
      element.addEventListener('mouseenter', () => {
        element.style.overflow = 'hidden';
      });
   
      element.addEventListener('mouseleave', () => {
        element.style.overflow = 'auto';
      });
    }
   }

   В этом примере scrollableElementполучается с помощью декоратора @ViewChild, а для обработки событий наведения добавляются прослушиватели событий.

Это всего лишь несколько примеров того, как можно показать и скрыть полосу прокрутки при наведении курсора мыши в приложении Angular. Вы можете выбрать метод, который лучше всего соответствует вашим потребностям и предпочтениям.