Блог

Главная - Вопросы по программированию - Выпадающий список ngb — Прокрутите до активного элемента

Выпадающий список ngb — Прокрутите до активного элемента

#javascript #html #css #angular #ng-bootstrap

Вопрос:

Я уже много лет использую ngbDropdown в качестве селектора. Это всегда 10 лет в будущем и в прошлом, в то время как текущий год является первоначально выбранным годом. Само выпадающее меню имеет максимальную высоту и может прокручиваться.

Теперь, когда я переключаю раскрывающийся список, выбранное (активное) значение может находиться за пределами видимых параметров. Есть ли «простой» способ прокрутить этот элемент в поле зрения или даже лучше прокрутить его так далеко, чтобы выбранный год находился в середине видимых параметров?

Я попробовал element.scrollIntoView, но для этого, я думаю, выпадающий список должен быть виден, но я не могу найти ни одного события, которое могло бы сработать сразу после отображения выпадающего меню. Для того, что я нашел, есть событие Javascript начальной загрузки «showed.bs.dropdown», которое было бы именно тем, что мне нужно, но я не могу найти эквивалент в ngBootstrap. Или есть еще лучший способ, который я упускаю из виду?

Ответ №1:

Похоже, вы можете использовать openChange событие NgbDropdown

   /**
   * An event fired when the dropdown is opened or closed.
   *
   * The event payload is a `boolean`:
   * * `true` - the dropdown was opened
   * * `false` - the dropdown was closed
   */
  @Output() openChange = new EventEmitter<boolean>();

Исходный код выпадающего списка: https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/dropdown/dropdown.ts#L213

Метки: