Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(v2): style right sidebar scrollbar when overflow #2017

Merged
merged 1 commit into from Nov 21, 2019
Merged

feat(v2): style right sidebar scrollbar when overflow #2017

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
18 changes: 18 additions & 0 deletions packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css
View file
Open in desktop
Expand Up @@ -30,6 +30,24 @@
top: calc(var(--ifm-navbar-height) + 2rem);
}

.tableOfContents::-webkit-scrollbar {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is not supported by FireFox, maybe we can use scrollbar color

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Its not supported by firefox but its supported in all other major browsers like Safari and Chrome.

Scrollbar color is an experimental feature in Firefox >= 64 and all major browsers doesnt support that.

In fact, its a bug of mozilla. No scrollbar equivalent in mozilla https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox

https://bugzilla.mozilla.org/show_bug.cgi?id=77790

Anyway, This is same behavior like v1, which is kinda battle tested. I think its ok if firefox wont see this

width: 7px;
}

.tableOfContents::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

.tableOfContents::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}

.tableOfContents::-webkit-scrollbar-thumb:hover {
background: #555;
}

@media only screen and (max-width: 996px) {
.tableOfContents {
display: none;
Expand Down