Угловой материал: Как скрыть полосу прокрутки окна при открытом ящике для мата? - PullRequest
Новая
       9

Угловой материал: Как скрыть полосу прокрутки окна при открытом ящике для мата?

0 голосов
/ 22 марта 2019

Сценарий:

  • Я пытаюсь использовать выдвижной ящик, как модальный боковой лист.

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

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

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

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

1 Ответ

0 голосов
/ 22 марта 2019

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

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

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

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

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

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

...