I'm working on a web project where on one page, I have a paginated JSF datatable. As a default, it has 12 rows - now when I select another amount, like 20, per dropdown box, more table rows are shown and the dropdown box at the bottom of the table scrolls out of view. I want to scroll it back into view for better user experience.

What I managed was implementing some event listener that gets fired whenever a selection from the dropdown gets chosen:

selector.onchange = updateView;

function updateView(e) {
    var selector = document.getElementById(e.target.id);
    selector.scrollIntoView();
}

However, this happens immediately after selecting something, while it takes a few 100 miliseconds for the table to reload. What's the best way to scroll to the dropdown box only after all rows are loaded properly?