How to Hide Scroll bar | Tauri Apps | Page 1

icy cypress Jan 2, 2025, 2:05 PM

#

I have set the css style to hide the scroll bar but when in the application the scroll bar still appears

surreal surge Jan 2, 2025, 5:08 PM

#

icy cypress I have set the css style to hide the scroll bar but when in the application the ...

What’s your framework?

icy cypress Jan 2, 2025, 5:10 PM

#

surreal surge What’s your framework?

Vue

pine hornet Jan 2, 2025, 7:15 PM

#

How did you hide the scrollbar? In the screenshot you have content overflowing, do you want it to overflow without being able to scroll? Or you just want to hide the scrollbar for some reason?

icy cypress Jan 3, 2025, 6:23 AM

#

pine hornet How did you hide the scrollbar? In the screenshot you have content overflowing, ...

I want when the content is not scrolled, the scrollbar disappears and will reappear when scrolled.

It goes something like this

pine hornet Jan 3, 2025, 8:45 PM

#

Ah, ok. Well, some platforms/browsers hide them by default. Notably macos. My first suggestion is not to mess with scrollbars, it will haunt you (speaking from experience).

#

Secondly, you can test with Safari on Mac (webkit), and Chrome or Edge on Windows. On Linux Epiphany seems good but not tried (Webkit). It should have the same look if you use the same rendering engine and platform. That can save some time testing in Tauri in case it's difficult to set up.

#

So, if there's a way to do it in the browser with CSS, it should work in Tauri. So there shouldn't be anything Tauri-specific about this question.

#

I think.

#

Here's the scrollbar css for my custom scroll component in Svelte:

    div {
        overflow-y: scroll;
        padding-left: 25px;
        padding-right: 11px;

        /* firefox specific. width is not respected but is ~14 px experimentally. */
        scrollbar-color: #ffffff4d;
    }
    @supports not selector(::-webkit-scrollbar) {
        div {
            padding-right: 25px;
        }
    }

    div::-webkit-scrollbar {
        background: transparent;
        width: 14px;
    }
    div::-webkit-scrollbar-track {
        padding: 2px;
    }
    div::-webkit-scrollbar-thumb {
        background: #fff3;
        border-radius: 10px;
        border: 4px solid transparent;
        background-clip: padding-box;
        width: 6px;
    }

#

Note that I'm not trying to hide the scrollbar, only make it smaller so that it looks more modern, slim and less clunky.

#

When searching, I would encourage you to use platform/rendering engine to narrow it down, e.g. "Chrome Windows hide scrollbar css".

#How to Hide Scroll bar