Enable toc sidebar scrolling

[j3soon]

This is an enhancement or feature.

Summary

Enable Table of Content sidebar scrolling as mentioned in issue #1851

This can be achieved by simply adding the followings in _navigation.scss:

.sidebar__right.sticky > .toc > .toc__menu {
  overflow-y: auto;
  max-height: calc(100vh - 7em);
}

When the toc sidebar is not sticky, this rule will not apply. While if the toc sidebar is sticky (.sticky), the toc_menu's height will be limited, and the content will be scrollable with a thin-width scrollbar. I use max-height instead of height to ensure that short TOCs will not be affected by this rule.

Other scrollbar CSS rules is just for making the scrollbar thin in Chrome/Firefox/... If the default wide scrollbar is not preferred, I can simply remove those style rules and keep the 4 lines above.

Before

After

Context

• Is there a way to make sticky table of contents scrollable? #1840
• scrollable sticky toc (enhancement request ) #1851

[iBug]

This doesn't look like good Sass/SCSS. I recommend nesting and relocating them as needed. For example:

Bad SCSS:

.example-1 {
  color: #aaa;
}

.example-1 .example-2 {
  font-weight: bold;
}

.example-1 .example-2::before {
  position: absolute;
}

Good SCSS:

.example-1 {
  color: #aaa;

  .example-2 {
    font-weight: bold;

	&::before {
	  position: absolute;
	}
  }
}

[iBug]

Also it's going to be ugly on mobile devices where this whole thing is unneeded. Should probably be wrapped inside

Perhaps my working code (preview and Wayback Machine) would be a good reference. But keep in mind that those codes are CC BY-SA 4.0 until I actively contribute them to this repo.

[j3soon]

Thanks for the teaching me the good coding style! I have just refactored my code. I have tested the code on Mobile & PC and on Firefox & Chrome.

[iBug]

_sidebar.scss is definitely a better fit for this change, and that's exactly what I meant by "relocating".

[iBug]

Actually this feature is hard to test for lacking a CSS standard of customizing the scroll bar, and that's why I'm hesitant to submit my code as a PR.

[j3soon]

The CSS style should work for all major browsers except for Internet Explorer:

• scrollbar-width
• ::-webkit-scrollbar

If such scrollbar customization is not preferred, maybe we can add the TOC scrolling feature with default scrollbar style?

[github-actions]

This pull request has been automatically marked as stale because it has not had recent activity.

This pull request will automatically be closed in 7 days if no further activity occurs. Thank you for all your contributions.

[iBug]

@mmistakes What are your comments for this feature? It looks and has been looking nice.

[mmistakes]

I'm cool with the PR, but let's remove the custom scrollbar for now and just stick with the default appearance.

[mmistakes]

Stick with the default scrollbar appearance and remove the custom ::-webkit-scrollbar-* declarations and I think we're good to merge it in.

[iBug]

I'm cool with the PR, but let's remove the custom scrollbar for now and just stick with the default appearance.

I'm not confident about this. The default appearance looks terrible in this context

Screenshot taken from Google Chrome & Microsoft Edge.

[j3soon]

I also prefer the custom scrollbar (tested on Chrome/Firefox on PC/Mobile). The default scrollbar looks bad, and without this feature, the overflowing TOC sidebar looks terrible too...

[github-actions]

This pull request has been automatically marked as stale because it has not had recent activity.

This pull request will automatically be closed in 7 days if no further activity occurs. Thank you for all your contributions.

[iBug]

This is nice to have. Any reason we can't proceed?

[mmistakes]

Add blank line to remain consistent with spacing

[mmistakes]

Is this color needed? I want to avoid a situation where this scrollbar doesn't match the native browser one applied to the entire page.

[mmistakes]

Similar comments to above. Are the colors needed if they're already picking up the default scrollbar colors?

[mmistakes]

While you're editing this file can you add a space between img and {?

[mmistakes]

The other concern apart from having to maintain custom styles to make the scrollbar match the default one... is the usability of a thin scrollbar on the TOC.

The touch targets are already small on all those TOC links. Throwing in a thin scroll bar seems like we're asking for trouble when used with pointing devices that don't have a scroll wheel/button and you have to actually drag the scrollbar.

[mmistakes]

Which browsers are showing the thicker scrollbars BTW? In my limited tests the TOC scrollbar matches the default system one without any scrollbar- CSS to make them thinner or change the colors.

Chrome:

Safari:

Firefox:

[iBug]

macOS's default scrollbar looks beautiful, but not that of Windows.

[mmistakes]

Splitting hairs at this point. I'm not at all bothered by Windows' default scrollbar.
I'd rather not customize one scrollbar and not the other. Let's pull out the custom scrollbar CSS so I can merge this in.

Then if someone wants to take a stab at custom scrollbars that affect the entire theme (not just the TOC) and factor in all the skin color variations... I'll look at that PR and provide feedback.

[j3soon]

I've done removing the custom scrollbar styles.

[mendax1234]

@j3soon Seems that using this style I can't let the scroll bar to be round. This is the code I try

.toc {
        .toc__menu {
          overflow-y: auto;
          scrollbar-width: thin;
          max-height: calc(100vh - 7em);
          &::-webkit-scrollbar {
            width: 8px;
          }
          &::-webkit-scrollbar-track {
            background: #F0F0F0;
          }
          &::-webkit-scrollbar-thumb {
            background-color: #CDCDCD;
            border: 1px solid #F0F0F0;
            border-radius: 4px;
          }
        }
      }

Thanks for any help!