Main content scrolls when mouse is left of Navigation Sidebar

Summary

When the page exceeds a width of 1460px the page elements will stop becoming wider, and there will be empty space added to the sides of the page instead. The empty space to the left side of the Navigation sidebar is not part of that sidebar, and will scroll the main content part of the page, instead of the navigation, even though it visually looks like it is part of the Navigation.

URL

https://developer.mozilla.org/en-US/docs/Web

Reproduction steps

1. Have a window wider then 1460px or zoom out far enough (e.g. more then 730px with 50% zoom, etc.)
2. Move the mouse pointer to the left of the Navigation side bar
3. Use Scroll wheel to scroll down -> The Main Content will scroll instead of the Sidebar

Expected behavior

The sidebar does extend to the left edge of the screen at all times.

Actual behavior

The sidebar does not extend to the left edge of the screen at all times.

Device

Desktop

Browser

Chrome

Browser version

Stable

Operating system

Windows

Screenshot

Current behaviour:

Expected Behaviour: (for this example using the code listed below)

Anything else?

the fix for this issue is very trivial; simply adding

.document-page .sidebar {
    margin-left: -800%;
    padding-left: 800%;
    width: 900%;
}

to the css would fix this issue already. (Technically it only makes the interactable boundary of the Navigation sidebar 9 times as wide, but if anyone zooms out far enough to have that much blank space to both sides i’d say they are to blame 😆)

I am in fact already using this fix through Tampermonkey and the following userscript: Gist: schockocraft/mdn-fix-sidebar-scroll.js

Validations

• I have read the Community Participation Guidelines.
• I have verified that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

[schockocraft]

Ok anyways i went on a stroll through the internet rn, with the following results:

---

• FFmpeg docs
• node.js documentation
• devdocs.io

do not have a max width for the content, so there’s never empty space to the left of the sidebar or to the side of the content

---

• npm Docs
• GitHub Docs
• Electron Docs

keep the sidebar at the left edge at all times, with the added padding on high page widths separating content from sidebar

---

• Java Documentation
• Mediawiki (Wikipedia)
• Most Forum Softwares

do not allow the sidebar to scroll separately

---

• Material for MkDocs
• Microsoft Docs

Have the same problem

---

StackOverflow & co have the same problem, but only at high zoom levels as on a normal screen sizes the sidebar will never be long enough to need to be scrolled.

readthedocs.io aligns the whole page content to the left.

Then there are also some documentations that don’t use sidebars at all like manpages or the JSDoc documenation

[caugner]

@schockocraft Thank you so much for the thorough research. 👍

After looking at the examples, and testing the scroll behavior on a few MDN pages, however, I come to the conclusion that it is working as intended. The empty space outside of the sidebars is not part of the sidebar, so it is normal that scrolling there scrolls the main content, not the sidebar. It’s also more likely that the user wants to scroll the main content rather than the sidebar.

I’m going to close this issue as “won’t fix”, but thanks for bringing this potential UX issue to our attention. 🙏