New body scrollbar style option

[PaperStrike]

Reverts #246

PR Checklist

• The commit message follows guidelines for NexT.
• Tests for the changes was maked (for bug fixes / features).
  • Muse | Mist have been tested.
  • Pisces | Gemini have been tested.
• Docs in NexT website have been added / updated (for features).

PR Type

• Bugfix.
• Feature.
• Code style update (formatting, local variables).
• Refactoring (no functional changes, no api changes).
• Documentation.
• Translation.
• Other... Please describe:

What is the current behavior?

I do apologize that I did not realize using --width for both margin and width in main-container, will make it necessary to set --width instead of width everytime we want to change the width of the related elements. In my recent tests, it HAS caused visible problems which did not mentioned in #246, and increases the difficulty of the development in the future.

What is the new behavior?

Users needing this functionality should use the original method mentioned in #176 (comment) , which is editing their custom style file to apply these rules: set the option body_scrollbar.overlay to true to place the scrollbar on top of the content.

body {
  width: 100vw;
  overflow-x: hidden;
  @supports (overflow-x: clip) {
    overflow-x: clip;
  }
}

NexT will not apply these rules by default for problems like #246 (comment) .

(Current Status: Option Added, PR Renamed) I think it is better to make the code above an option exists in NexT. Will try to make commits for it and rename this PR if no one complaints.

---

The new stable option only reflects to overflow-y: scroll at the moment. Its name and behavior may be changed in later commits, if someone has a better suggestion.

How to use?

In NexT _config.yml:

# Override browsers' default behavior.
body_scrollbar:
  # Place the scrollbar over the content.
  overlay: false
  # Present the scrollbar even if the content is not overflowing.
  stable: false

[coveralls]

Coverage remained the same at 92.469% when pulling 215e456 on revert-246-overlay-body-scrollbar into b02a186 on master.

[PaperStrike]

It seems like the overlay and stable should be able to be used in the same time. Will change it to something more extendable like:

body_scrollbar:
  overlay: false
  stable: false

later. changed.

[stevenjoezhang]

A new CSS property scrollbar-gutter is supported by Chrome 94+ https://caniuse.com/mdn-css_properties_scrollbar-gutter

https://www.zhihu.com/column/p/463231375

[stevenjoezhang]

Update: scrollbar-gutter is not suitable for this scenario. It will cut off the headband.

To beautify scrollbar: https://segmentfault.com/a/1190000042323523/en