div.scrollTop не работает в коде, работает в консоли

Question

У меня есть div с установленной высотой и overflow : auto. Когда я использую в своем коде div.scrollTop = 0;, он не работает, но если я делаю то же самое в консоли, он работает.

//here, div is scrolled half way 
div.innerHTML = ""; 
div.scrollTop = 0; //not working 
div.appendChild(new_long_content); 
//here, div is still scrolled 

Answer 1

//assume we have a `div` with a lot of content and a scrollbar, 
//and the content is scrolled down: 

//this case works 
div.innerHTML = ""; //content is small, the scrollbar will disappear. 
div.appendChild(new_long_content); //scrollbar reappears and it will have the 
            //same position as it had before disappearing: 0. 
div.scrollTop = 0; //px - new content is scrolled up. 

//this doesn't work 
div.innerHTML = ""; //content is very short so the scrollbar will disappear. 
div.scrollTop = 0; //px - setting scrollTop when scrollbar not in use has no effect. 
div.appendChild(new_long_content); //new content is added, scrollbar appears again, 
            //but with the old scroll position. 

//summary: you should only use scrollTop when scrollbar is visible and after 
//the new content is loaded, because scrollTop affects only the scrollbar directly and the div only indirectly.