How the #$*& do I auto-scroll this element?

Problem

I have NO idea which div (or other element) I need to scroll to get to the content I need.

Solution

First, load up your page and scroll the element you're trying to identify a little.

Paste this script in your browser console. You might have to toggle the multi-line console input. It's the little ^ on the bottom-right, if you're not familiar.

var all = document.getElementsByTagName("*");
for (var i=0, i < all.length; i++) {
    if(all[i].scrollTop != 0){
        console.log(all[i])}}

If you've only scrolled that one element, that should be the only one listed. Otherwise, you have some extra work to do.

If you have a few results, you can manually check each one. First, go through each element and use

document.getElementById("YOURELEMENTID").scrollTop

Now scroll a little and go back through. Whichever element changed, that's the one you've been looking for.

Breakdown

In the first script block, we're grabbing EVERY element in the DOM using document.getElementsByTagName("*"). Next, we loop through and look for anything that a) has a scroll bar and b) isn't at the top. Since you only scrolled that one element, only that element should be returned. 

As always, if you have any questions, suggestions, best practices, or gripes, leave a comment.

Add comment

Loading