I am currently working on enhancing a module within the application I'm developing. The goal is to automatically scroll the browser window to the bottom of an element when said element's height exceeds the height of the window.
The functionality is similar to the example snippet below - in this scenario, adding an item to a list that surpasses the window's height requires manual scrolling to view the add button again. Is there a way to automate this process specifically for a designated element, without having to scroll to the bottom of the entire document?
(function() {
var lists = document.querySelector('ul'),
addBtn = lists.nextElementSibling.lastElementChild,
textInput = addBtn.previousElementSibling;
addBtn.addEventListener('click', appendItem);
function appendItem() {
var item = document.createElement('li');
if (textInput.value == '') item.innerText = 'test-item';
else item.innerText = textInput.value;
lists.appendChild(item);
}
console.log(lists, addBtn, textInput);
})();div:not(#fake-form) {
background-color: #F9F2C4;
max-width: 200px;
margin: 0 auto;
}
ul {
list-style: none;
padding: 4px;
margin: 0;
}
ul li {
list-style: none;
padding: 4px;
margin: 0;
font-size: 24px;
}
div#fake-form {
text-align: center;
padding: 4px;
}
input {
display: block;
width: 100%;
box-sizing: border-box;
margin-bottom: 4px;
}<div>
<ul>
<li>test item</li>
<li>test item</li>
<li>test item</li>
<li>test item</li>
<li>test item</li>
<li>test item</li>
<li>test item</li>
</ul>
<div id="fake-form">
<input type="text">
<button>add item</button>
</div>
<div>