Как сделать scrolling position:absolute элементов (CSS)?

Question

Решил написать чат, и хочу, чтоб сообщения отображались снизу вверх. Вот html и css:

/*Блок для вывода сообщений, который должен скроллиться*/

.correspondence {
  position: relative;
  width: 100%;
  height: 80vh;
  border: 3px solid #000000;
  border-top: none;
  background-color: #346ABC;
  overflow-y: scroll;
}


/*Свойства для сообщений отправителя*/

.temp-login-user-message {
  position: absolute;
  bottom: 200px;
  right: 0;
  width: 100%;
}

.temp-login-user-message>p {
  float: right;
  width: 40%;
  text-align: center;
  background-color: #24BC21;
  padding: 15px;
  border-radius: 25px;
}

.temp-login-user-message>img {
  display: block;
  float: right;
  margin-right: 20px;
  margin-left: 20px;
  width: 100px;
  height: 100px;
}


/*Свойства для сообщений других пользователей*/

.temp-other-users-message {
  position: absolute;
  bottom: 80px;
  width: 100%;
}

.temp-other-users-message>p {
  float: left;
  margin-left: 20px;
  width: 40%;
  text-align: center;
  background-color: #FFFBFB;
  padding: 15px;
  border-radius: 25px;
}

.temp-other-users-message>img {
  display: block;
  float: left;
  margin-left: 20px;
  width: 100px;
  height: 100px;
}

<div class="correspondence">
  <section class="temp-login-user-message">
    <img src="img/unknown_male.png" alt="user-photo" class="user-photo">
    <p class="user-message">LOL!</p>
  </section>
  <section class="temp-other-users-message">
    <img src="img/unknown_female.png" alt="user-photo" class="user-photo">
    <p class="user-message">Agree! =)</p>
  </section>
</div>

В js, при вводе нового сообщения и отправки его, я вычисляю у каждого блока для сообщений его отступ снизу (bottom) от родителя (.correspondence) и прибавляю к этим значениям 100px. Однако scroll у блока для просмотра сообщений (.correspondence) не работает. Заранее спасибо за ответ.

Answer 1

Высота родителя абсолютных элементов должна быть конкретной.

и прибавляю к этим значениям 100px

прибавляйте их и к высоте .container.

/* Песочница */
const [ container, block, input, button ] = [...document.querySelectorAll(".container, .correspondence, input, button")];

button.addEventListener("click", () => {
  const section = document.createElement("section");
  section.classList.add("temp-login-user-message");
  section.innerHTML = `
      <img src="img/unknown_male.png" alt="user-photo" class="user-photo">
      <p class="user-message">${input.value}</p>
  `;
  block.appendChild(section);
  [...block.children].forEach((child, index) => child.style.bottom = (index * 100) + "px");
  block.style.height = (block.children.length * 100) + "px";
  container.scrollTop += 100;
})

body { margin: 0px; padding: 0px; }

/*Блок для вывода сообщений, который должен скроллиться*/

.container {
  height: 80vh;
  border: 3px solid #000000;
  border-top: none;
  background-color: #346ABC;
  overflow-y: scroll;
}

.correspondence {
  position: relative;
  height: 200px;
}


/*Свойства для сообщений отправителя*/

.temp-login-user-message {
  position: absolute;
  bottom: 100px;
  right: 0;
  width: 100%;
  overflow: hidden;
}

.temp-login-user-message>p {
  float: right;
  width: 40%;
  text-align: center;
  background-color: #24BC21;
  padding: 15px;
  border-radius: 25px;
}

.temp-login-user-message>img {
  display: block;
  float: right;
  margin-right: 20px;
  margin-left: 20px;
  width: 100px;
  height: 100px;
}


/*Свойства для сообщений других пользователей*/

.temp-other-users-message {
  position: absolute;
  bottom: 0px;
  width: 100%;
  overflow: hidden;
}

.temp-other-users-message>p {
  float: left;
  margin-left: 20px;
  width: 40%;
  text-align: center;
  background-color: #FFFBFB;
  padding: 15px;
  border-radius: 25px;
}

.temp-other-users-message>img {
  display: block;
  float: left;
  margin-left: 20px;
  width: 100px;
  height: 100px;
}

<div class="container">
  <div class="correspondence">
    <section class="temp-login-user-message">
      <img src="img/unknown_male.png" alt="user-photo" class="user-photo">
      <p class="user-message">LOL!</p>
    </section>
    <section class="temp-other-users-message">
      <img src="img/unknown_female.png" alt="user-photo" class="user-photo">
      <p class="user-message">Agree! =)</p>
    </section>
  </div>
  <!--Песочница-->
  <div>
    <input type="text" /> <button>Send</button>
  </div>
  <!--/Песочница-->
</div>

БЛОГ НА HUSL

Как сделать scrolling position:absolute элементов (CSS)?

Ответы (1 шт):