CODEWITHSUNDEEP
javascripthtmlscroll
Nikoloz Tukhashvili
Nikoloz Tukhashvili

Reputation: 65

How make auto scroll down when new element is added?

I'm making messenger style chat.

My HTML

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

Nothing much. I haven't started CSS yet (well I did little bit to align stuff)

Here's the 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();
    }
  }
);

And when I type some messages it doesn't scroll down. I googled it even checked on this site but couldn't find answer, some of them didn't work.

I tried this too

.scrollIntoView();

but that didn't work.

And if there's a way without jQuery, that would be nice :)

And also input has position fixed

Upvotes: 1

Views: 4214

Answers (1)

Igor
Igor

Reputation: 57

Get the new element :

var element = document.getElementById(newElement);

and the first for instant scroll and second for smooth scroll:

element.scrollIntoView();

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

Here is a useful webpage : https://developer.mozilla.org/de/docs/Web/API/Element/scrollIntoView

Upvotes: 2

Related Questions