Создать прокручиваемый Div для Angular Чат

Question

Я создаю приложение чата в Angular и пытаюсь настроить для него пользовательский интерфейс. Мне нужно создать элемент div, который будет содержать сообщения чата, и по мере того, как больше сообщений заполняет элемент div, я не хочу, чтобы элемент div расширялся, а просто оставался в том же размере и отображал полосу прокрутки. Этот div должен быть на 100% больше родительского div. Когда вы нажимаете кнопку, чтобы добавить данные, div увеличивается. Даже если я установлю высоту в формате px или в процентах, div все равно будет расти.

Answer 1

Страница, на которую вы ссылаетесь, не будет загружаться, но вот основы создания элемента с возможностью прокрутки:

HTML / JS Структура

1. Создание внешнего контейнера div
2. Создание внутреннего контейнера div (это будет «оболочка прокрутки»)
3. Добавление внутреннего контейнера во внешний контейнер
4. Вставьте все, что вам нужно во внутренний контейнер (вы можете использовать что-то вроде insertAdjacentHtml или что-то, что работает для вашей конкретной c ситуации)

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

CSS

1. Для внешнего контейнера

   • Установить фиксированный значение для width и установите height: auto
   • Установите border-radius, если вы хотите круглые края
   • Установите overflow: hidden, чтобы не допустить выпадения углов оболочки прокрутки
   • Вы, вероятно, захотите немного padding

2. Для внутреннего контейнера

   • Установите position: relative
   • Установите overflow-y: auto и overflow-x: hidden так, чтобы вы могли прокручивать вверх и вниз, но не из стороны в сторону
   • Для желаемого поведения переполнения вам необходимо установить width: 100% и установите фиксированные значения для max-height и min-height. (max-height решает, когда вещи начнут переполняться ie. Сделайте полосу прокрутки)
     • Вы захотите, чтобы max-height и min-height были меньше, чем фиксированный внешний контейнер width + any padding и др. c. оно может иметь.