[FEATURE] Remove custom scrollbar styling

[rolandjitsu]

Describe the feature you want 描述你的功能需求

I recommend removing the custom scrollbar styling for a couple of reasons:

1. It's not possible for a user to restore the native behaviour (the scrollbar goes away if you don't scroll) - or I'm not aware of how;
2. It takes unnecessary attention; at least in dark mode it's very obvious.

Or maybe make it so it's easy to disable the theme behaviour and use the native one (maybe via a scss var or something). If this is something that would be considered, I could make a PR.

Btw, I really like the theme!

Useful reference 有价值的参考

No response

[HEIGE-PCloud]

To disable the custom scrollbar, simply remove these few lines. You probably want to set the color-scheme as well so the native scroll bar fits the dark mode.

DoIt/assets/css/_core/_base.scss

Lines 18 to 30 in 8e778b4

	/* scrollbar, only support webkit */
	::-webkit-scrollbar {
	width: .5rem;
	height: .5rem;
	}
	::-webkit-scrollbar-thumb {
	background-color: $scrollbar-color;
	&:hover {
	background-color: $scrollbar-hover-color;
	}
	}

1. What browser are you using? On desktop, neither Chrome or Firefox seems to have the "auto hide" behaviour. Safari does not seems to respect the customization anyway.

2. I would rather say the native scroll bar is more distracting. It is thicker and takes up more space visually.

Chrome

Firefox does not support this customization anyway.

[rolandjitsu]

@HEIGE-PCloud thanks for the quick response!

Sorry, I should have stated my env:

1. macOS 11.6.2
2. Chrome 99.0

And yes, you're right, the -webit-* prefix does not affect Firefox. So I'm seeing the customisation applied in:

1. Chrome 99.0
2. Safari 15.2
3. Edge 99.0

And I guess the auto hide behaviour is only present on macOS. Same with the thickness, it's thinner on my OS, when using native styling, than what the customisation sets.

Yes, I found the CSS responsible for it, but I didn't want to deviate from the upstream (this repo) and remove styling there. Are you aware of another way of achieving the same result without making a fork of the theme and add my own commits on top?

I've just started hugo, so maybe there's something I don't know? I know that you can override and add custom CSS by adding the _override.scss/_custom.scss files, but that doesn't help in this case (applying style makes the scrollbar persistent).

Ultimately, this is a very small thing I guess 😆 And it would only make a diff to a small amount of users.

[HEIGE-PCloud]

Set

 $custom-scrollbar: false;

in your_site/assets/css/_override.scss can disable the custom scrollbar.

[rolandjitsu]

@HEIGE-PCloud that was fast! Thanks a lot!