Skip to content

[doc site] scrolling behavior is sometimes unintuitive due to right side bar  #10562

@ZYinMD

Description

@ZYinMD

Describe the problem

When reading the sveltekit doc, I sometimes find I can't scroll down. I would then try to use keyboard to scroll down instead, and find keyboard doesn't work either.

It took me 3 days before realizing what has been happening:

  1. when my mouse pointer is in this area, scroll doesn't work, because it's trying to scroll the sidebar.
    image
  2. I would then subconsciously click the mouse once, then scroll again, because our brains are trained to think that sometimes the reason why scroll doesn't work is because the window is not in focus
  3. by doing 2, I unintentionally gave the DOM focus to the sidebar, which is why keyboard can't subsequently scroll either.

Describe the proposed solution

Some easy things can be done:

  1. Make the sidebar non-interactable, except the clickable parts which should still be clickable. This prevents the sidebar from getting DOM focus, then the keyboard will always work. It may even fix the mouse too, but I'm not sure.
  2. Give the sidebar a slight different color, e.g. light grey, and people will subconsciously move the mouse cursor out of the grey area before scrolling. It would be even more psychologically effective if the different color only happens on hover, but that may or may not feel weird, need to test.

Alternatives considered

Less hacky but more work: change the div structure so that the doc body occupies the full width from left to right, and the sidebar floats on top of it, taking no more height than its clickable parts.

Importance

nice to have

Additional Information

This issue is also present on the svelte doc site https://kit.svelte.dev/docs/

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentation

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions