Where am I? – Multi-scrollbar Shenanigans

Posted on October 30, 2013


As I was writing my latest post “iOS7 – NN/G Say it Best”, I noticed an interesting usability issue within WordPress that actually applies to a lot of different websites. I wanted to get my thoughts out and see if anyone else has any thoughts on the issue or whether they have noticed or experienced this problem themselves.

As I am writing the post in the WordPress “Edit Post” screen, I realized there was more to the bottom of the screen of this page than was visible. I decided to pause my writing to investigate what else existed down there. Naturally, I use the roller on my mouse to scroll to the bottom of the page, though I didn’t scroll to the bottom of the page, I scrolled to the bottom of my post. This occurred because my cursor was hovering inside the typing area and therefore the computer thought I was wanting to scroll down within this box. Of course the simple fix to this issue is to move my cursor out of the typing area and into some place where there is static content. This enabled me to scroll down through the actual page and not through the typing area. I took a screenshot of my WordPress screen as I am writing this post to help illustrate this, sorry about the small image size, I couldn’t figure out how to make it any larger.


As you can see in the picture after I investigated a little, there turned out to be three different areas with scroll functionality within the same window!

  1. Green box – the actual wordpress.com webpage I am in
  2. Orange box – the content area where I am writing my blog
  3. Blue box – the related content area where wordpress shows content related to what I’m typing

I found, as you might guess, that in order to actually scroll through the webpage (the green box), my cursor needed to be outside of the other two areas (orange and blue). Similarly, if I wanted to scroll through the content I had written, I had to make sure the cursor was in the appropriate (orange) box. The same was true if I wanted to scroll through related content, I had to navigate my cursor to the blue box.

I ran into another interesting occurrence when I was scrolling through my written content (orange box) and reached the bottom. The downward scroll functionality for the orange box automatically disabled and enabled the scrolling functionality for the layer above it, the green box in my example. Of course this functionality only worked until I scrolled down a bit and  my cursor found itself in the blue box, at which point the scrolling functionality for the green box was disabled and I was suddenly scrolling through the blue box! This disabling and enabling of scrolling functionality within the same window often led to jerking of the screen as it fought to keep up with my rapid scrolling through multiple sections of the website. This left me feeling disoriented, and it took a second to re-familiarize myself with where I was within a website that I am quite familiar with. What if this happens to someone in a website they haven’t been to before? This confusion could cause someone to have to restart from the beginning via a home button or a back button, or worse: leave the page all together!

I thought critically about this for a while, and decided that I was sure just about everyone had ran into this issue at least once whether they realized it or not. It isn’t something that immediately irks my mind: “Hey! I wasn’t scrolling through here!, why did that move!?”, but it did get me thinking about the way large quantities of data are displayed in a small space. I concluded that the minor inconvenience of having to be, at least on some level, consciously aware of the location of my mouse while navigating a webpage was worth the ability to access larger quantities of information without having to separate the content out into different pages.

What about your thoughts. Has anyone experienced issues like this before? Is there a viable workaround?

Posted in: Thoughts & Ideas