How to indicate the relationship between a selected item in a list and the detailed item view when they are separated by a scroll bar?

I am designing an application which displays tickets. The tickets are displayed in a list. There can be hundreds of tickets in the list. When the user selects an item (i.e. ticket) from the list, the details of the selected item should be displayed on the same screen, to keep the interaction and consumption of content efficient.

When designing the list and the detailed view, we initially considered the use of the same background color to indicate which item in the list on the left hand side relates to the detailed view on the right hand side.

As you can see in the attached image, this works very well for touchscreen devices where no scroll bar separates the item list from the item detailed view. If the screen is displayed on a desktop monitor, a scrollbar will interrupt the item list from the detailed view which weakens understanding the relationship.

We use HTML5 and CSS for the implementation.

Two variants of items in a list and with a detailed view of the selected item

The question is: How to indicate the relationship between a selected item in a list and the detailed item view when they are separated by a scroll bar?

Options I have considered but rejected and I do not prefer:

  • I considered to move the scroll bar to the left hand side. However, some discussions here indicate that this is not intuitive (rejected)
  • I considered not showing a scroll bar at all. Discussions and habits indicate that this is not intuitive (rejected)
  • Use of the same background color and item name, like indicated in the image (not preferred)

Any other ideas?

Tags: