Skip to main content
added clarification based on comments
Source Link
Code Maverick
  • 10.1k
  • 5
  • 35
  • 58

I've been in this situation many times. What I've always done is program the app to scroll the child-most element that the cursor is over and only that element:

To clarify, when I say only that element, I mean that if you're scrolling an element in one direction and you reach the end of that scrollbar, I program it such that it does not proceed by scrolling its parent element in that direction.

Some would argue that if it did proceed by scrolling its parent element in that direction that it would save you the hassle of moving the cursor in order to "escape" the child element. While this is true, it is precisely the situation I try to avoid, as it would also cause unwanted jittery up and down interaction between the various elements that would be scrolled.

So in summary, I program the app so that when you're scrolling an element in one direction and you reach the end of that scrollbar, nothing happens until you do 1 of 2 things: 1) you scroll in the other direction or 2) move your cursor to another element you wish to scroll.

Here's a visual representation:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I've been in this situation many times. What I've always done is program the app to scroll the child-most element that the cursor is over and only that element:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I've been in this situation many times. What I've always done is program the app to scroll the child-most element that the cursor is over and only that element:

To clarify, when I say only that element, I mean that if you're scrolling an element in one direction and you reach the end of that scrollbar, I program it such that it does not proceed by scrolling its parent element in that direction.

Some would argue that if it did proceed by scrolling its parent element in that direction that it would save you the hassle of moving the cursor in order to "escape" the child element. While this is true, it is precisely the situation I try to avoid, as it would also cause unwanted jittery up and down interaction between the various elements that would be scrolled.

So in summary, I program the app so that when you're scrolling an element in one direction and you reach the end of that scrollbar, nothing happens until you do 1 of 2 things: 1) you scroll in the other direction or 2) move your cursor to another element you wish to scroll.

Here's a visual representation:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Source Link
Code Maverick
  • 10.1k
  • 5
  • 35
  • 58

I've been in this situation many times. What I've always done is program the app to scroll the child-most element that the cursor is over and only that element:

mockup

download bmml source – Wireframes created with Balsamiq Mockups