Chat User Scroll Markers - Simple CSS Version & Updated Advanced Version

[entitycs]

This pure CSS solution mimics my forked JS solution, with the following differences:

• markers are placed equidistant from one another
  • vs. the forked solution, which attempts to align markers with their relative scrollbar thumb position
• markers are larger in this version, to help with the fact that they are shallowly gapped (ie. feel free to edit the gap rule below)

Highly accessible, also through keyboard inputs!

...and of course, modifiable via css 😏

Just throw this into style.css, in place of the .chat-history selector (or just insert the last two rules in the selector from this example, along with the remaining css that follows).

.chat-history {
     flex:1;
     overflow-y:auto;
     overflow-x:hidden;
     overscroll-behavior-y: none;
     margin-bottom:8px;
     white-space:normal;
     min-height:0;
     --chat-max: 800px;
     padding-left: max(0px, calc((100% - var(--chat-max)) / 2));
     padding-right: max(12px, calc((100% - var(--chat-max)) / 2 + 12px));
     scroll-snap-type: y mandatory;
     scroll-marker-group: after;
   }

   /* Visual marker group */
   .chat-history::scroll-marker-group {
     display: flex;
     flex-direction: column;
     gap: 0.5em;
     place-self: flex-end;
     position: relative;
     right: 8px;
     top: -50%;
   }

   /* Current visual marker */
   .msg-user::scroll-marker:target-current {
     background: white;
     background-color: var(--select-option-fg);
     filter: brightness(1.5) blur(0.5px) contrast(1.5);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 12%, transparent);
   }

   /* Visual markers (just large enough to 'press') */
   .msg-user::scroll-marker {
     content: " ";
     border: 1px solid var(--brand-color);
     flex: none;
     border-radius: 3px;
     height: 6px;
     width: 1em;
     background: color-mix(in srgb, var(--fg) 60%, transparent);
   }

   /* Focus and hover affordances */
   .msg-user::scroll-marker:focus,
   .msg-user::scroll-marker:hover{
     outline: none;
     background: color-mix(in srgb, var(--fg) 80%, transparent);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 12%, transparent);
   }

You now have an easy way to navigate through the start of each assistant response, by way of the ability to navigate back to each of your chat prompts within the conversation. The styles are already set up to use some form of theming, but I leave the rest to you.

Thumb-aligning JS version

It's really looking like in order to be pixel-perfect with the javascript thumb-aligning marker version, I'd have to create a custom scrollbar altogether - else some browser / phone, using some OS / browser, or some completely viable OS accessibility setting is going to break the alignment in some cases.

[entitycs]

Updated 'Advanced' version:

• (much) Better alignment across content and scroll thumb sizes
• auto-marker hover/active state on scrollend, for when markers get condensed
  • this occurs, for example, on long task chat histories