Search code examples
javascriptcsselectronstyles

How to overflow auto focus last element


I develop Todo App. İf add to new element, scrollbars not focusing bottom of the page. How can i solve this problem ?

How can I automatically fix it to the bottom all the time?


Solution

  • You can make use of Element.scrollIntoView() after adding it.

    For example:

    function addElement(text) {
       // create a new element
       const element = document.createElement('p');
       element.innerText = text;
    
       // get the list where you want to add the element 
       const list = document.getElementById("myList");
       list.appendChild(element);
    
       // scroll to it
       element.scrollIntoView();
    }
    

    For more information's about compatibility you should have a look at https://developer.mozilla.org/de/docs/Web/API/Element/scrollIntoView it is marked as experimental, but all common browsers support it.