Как реализовать всплытие наверх комментариев?
Приветствую всех. Помогите, пожалуйста, с советом - на какую библиотеку, технологию опереться, чтобы делать подобные комментарии, как на фото, т.е. чтобы по кнопке отправить они всплывали вверх в область экрана и при переполнении уходили вверх за область видимости?
![]() |
Никаких технологий кроме базовых html, js и css тут не требуется.
<style> *{ margin: 0; padding: 0; } .container{ margin: 10px auto; position: relative; height: 100px; width: 304px; border: 1px solid gray; overflow: hidden; } #inner{ position: absolute; bottom: 24px; left:0; width: 100%; } .message{ border-radius: 10px; padding: 2px 10px; margin: 2px; background: gray; float: right; clear: both; } .input{ border-top: 1px solid gray; position: absolute; bottom: 0; left:0; } #input, #send{ border: none; padding: 2px; height: 20px; } #input{ width: 200px; } #send{ width: 100px; } </style> <div class="container"> <div id="inner"></div> <div class="input"> <input id="input"/><input id="send" value="Send" type="button"/> </div> </div> <script> send.addEventListener('click', function(){ if(!input.value.trim()) return false; var msg = document.createElement('div'); msg.className = 'message'; msg.appendChild(document.createTextNode(input.value)); input.value = ""; inner.appendChild(msg); }) </script> Но если очень хочется всегда можно найти готовую библиотеку для этого. |
Aetae,
благодарю! |
Часовой пояс GMT +3, время: 11:19. |