Блог

Главная - Вопросы по программированию - Angular material: Как скрыть полосу прокрутки окна при открытом mat-ящике?

Angular material: Как скрыть полосу прокрутки окна при открытом mat-ящике?

#css #angular #angular-material #angular-material2

#css #angular #angular-material #angular-material2

Вопрос:

Сценарий :

  • Я пытаюсь использовать mat-drawer как модальную боковую таблицу.

  • Поэтому, когда ящик открыт, я не хочу, чтобы пользователь мог взаимодействовать с чем-либо за пределами боковой панели. Это означает, что я не хочу, чтобы пользователь мог прокручивать окно, когда открыта боковая таблица.

    Есть ли способ сделать так, чтобы при открытом ящике прокрутка отключалась, а полоса прокрутки исчезала?

Вот пример, демонстрирующий проблему. Обратите внимание, что при открытом ящике полоса прокрутки страницы все еще присутствует, и вы можете прокручивать окно, а также содержимое ящика.

  • Как я могу заставить эту полосу прокрутки исчезнуть, чтобы пользователь мог взаимодействовать только с содержимым ящика?

Комментарии:

1. Почему ваше приложение вложено с разрешением 2000 пикселей div ?

2. Просто так, чтобы появилась полоса прокрутки

3. @phelhe Я включил свое решение. Это работает в моей демо-версии. Дайте мне знать, работает ли это в вашем приложении!

Ответ №1:

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

В вашем app.component.css добавьте следующие свойства CSS overflow: auto и overscroll-behavior-y: contain , чтобы предотвратить «экранирование» прокрутки из вашего mat-ящика.

В некотором смысле, мы можем сказать, что это создает логическое разделение между контекстом прокрутки ящика и основным приложением.

 .drawer-content {
  height: 100vh;
  width: 300px;
  background: orange;
  overflow-y: auto;
  padding-left: 20px;

  overflow: auto;
  overscroll-behavior-y: contain;
}

Я воспроизвел демонстрацию здесь. (Я оставил другие классы и свойства CSS нетронутыми.)