Как сделать автоматическую прокрутку вниз при добавлении нового элемента?

#javascript #html #scroll

#javascript #HTML #прокрутка

Вопрос:

Я создаю чат в стиле messenger.

Мой HTML

 <div class="mechanism">
    <input type="text" class="textbox"></input>
    <button class="send">send</button>
</div>

Ничего особенного. Я еще не запустил CSS (ну, я немного выровнял материал)

Вот JavaScript:

 var textbox = document.querySelector('.textbox');
var sendBtn = document.querySelector('.send');

var paragraph = '';

textbox.addEventListener (
    'input', function () {
        paragraph = this.value;
    }
);
sendBtn.addEventListener (
    'click', function () {
        var newP = document.createElement('h2');
        document.body.appendChild(newP);
        newP.textContent = paragraph;
        textbox.value = '';
        textbox.focus();
        paragraph = '';
    }
);
textbox.addEventListener(
    "keyup", function (event) {
    if (event.keyCode === 13) {
        event.preventDefault();
        sendBtn.click();
    }
  }
);

И когда я набираю некоторые сообщения, они не прокручиваются вниз. Я погуглил это, даже проверил на этом сайте, но не смог найти ответа, некоторые из них не работали.

Я тоже пробовал это

 .scrollIntoView();

но это не сработало.

И если есть способ без jQuery, это было бы неплохо 🙂

А также ввод имеет фиксированную позицию

1. Но вы хотите, чтобы входные данные также оставались в поле зрения, даже при прокрутке вниз? Тогда почему бы не вставить новое содержимое над полем ввода, а не под ним? Это приемлемо?

2. У ввода @trincot есть позиция: исправлено; я думаю, мне тоже нужно добавить css: D

Ответ №1:

Получить новый элемент :

 var element = document.getElementById(newElement);

и первый для мгновенной прокрутки, а второй для плавной прокрутки:

 element.scrollIntoView();

element.scrollIntoView({behavior: "smooth"});

Вот полезная веб
-страница: https://developer.mozilla.org/de/docs/Web/API/Element/scrollIntoView

1. хм … хорошо. может быть, вы можете скопировать и вставить то, что вы пробовали?

2. может быть, вам следует проверить опечатку

3. Если это вам помогло, вы можете нажать на галочку, чтобы подтвердить это как решение.