Issue using ::-webkit-scrollbar to hide scrollbar

[cerros]

Hi. I am trying to hide the scrollbar for one specific note. Therefore, I want to create a helper class for the following css snippet:

::-webkit-scrollbar {
	display:none;
}

Said snippet hides ALL the scrollbars in obsidian (in both reading and editing mode), but I don’t want that, I only one to hide the scrollbar that is next to my note:

So my idea is to create a helper class, like the next one:

.hide ::-webkit-scrollbar {
	display:none;
}

Curiously, when using this snippet as a helper class, it no longer hides all the scrollbars in obsidian, only the one for my note.

But if I do that, it only hides the scrollbar when in editing mode. In reading mode, it no longer does anything.

So, how can I hide the scrollbar for my note in both editing and reading mode?

Any help would be greatly appreciated. Thanks.

[ariehen]

You could try this using hide-scrollbar (can be changed) as a cssclass in the note(s) where you want the scrollbar hidden.

.hide-scrollbar {
    --scrollbar-active-thumb-bg: #d3d3d350; /* hover and grabbing color */
    --scrollbar-thumb-bg: transparent;
}

[cerros]

@ariehen

.hide-scrollbar {
    --scrollbar-active-thumb-bg: #d3d3d350; /* hover and grabbing color */
    --scrollbar-thumb-bg: transparent;
}

Hi. Thanks for your answer. One question, do you know if there is a way to actually hide the banner? I tried your implementation; the issue is that it only makes the scrollbar transparent. And when using banners, the gab becomes very visible, even if the scrollbar is transparent…

[ariehen]

I don’t use any banners or background images in my notes and didn’t set anything up, so not sure if this will work or not with an image, but you could give it a shot:

.markdown-source-view.hide-scrollbar ::-webkit-scrollbar,
.markdown-preview-view.hide-scrollbar::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

[cerros]

@ariehen

.markdown-source-view.hide-scrollbar ::-webkit-scrollbar,
.markdown-preview-view.hide-scrollbar::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

Mate, you are the real deal it worked great. Thanks for the help. I really apreaciate it.