Lost Tech (thelemmy.club)
submitted 3 hours ago by to c/comicstrips@lemmy.world
 

all 7 comments

sorted by: hot top controversial new old
[–] 19 points 2 hours ago (5 children)

I hate offscreen content that's not indicated by a scrollbar. And the worst thing is some fancily animated presentation that uses the hidden scrollbar as a seek bar.

  • source
  • hideshow 5 child comments
  • [–] 6 points 2 hours ago (4 children)

    And if there is a scrollbar it's 2 pixels wide, so hard to hit with either a mouse pointer or a finger

  • source
  • parent
  • hideshow 4 child comments
  • [–] 7 points 2 hours ago (3 children)

    I think a lot of "modern" scrollbars are just there as an affordance so you know that the content is scrollable and how far you've scrolled down, not to actually click and drag. Not entirely sure about the UX research for this but my guess is that it's because most people either physically drag (like with a touchpad or touch screen) or use a mousewheel to scroll down.

  • source
  • parent
  • hideshow 3 child comments
  • [–] 3 points 2 hours ago

    Some websites / web apps have the opposite problem: too many scrollbars.

    MacOS has a setting to hide scrollbars when a mouse isn't plugged in (i.e. when just using the trackpad on a laptop), and it's enabled by default. Even if you force a scrollbar to appear using CSS (overflow: scroll), it won't appear.

    I've seen sites where some boxes had two or three sets of scrollbars, because the developer didn't test on desktop OSes other that MacOS (or on MacOS with a mouse plugged in) and didn't realise that their CSS was adding scrollbars to too many elements.

    In any case, your design should have an affordance to show that there's more content that can be scrolled to. A common way to do it is fading out or having a shadow on the scrollable edge. This technique is close to 15 years old but I still see it used today: https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/. The Chrome dev site has some brief notes on some more modern techniques: https://developer.chrome.com/docs/modern-web-guidance/guides/ui-atoms/scrollability-affordance-hints

  • source