[feat] allow styling of scroll bars

[benediktms]

Describe the problem

The current webviews do not support custom styles for scroll bars via something like-webkit-scrollbar and related properties.

Describe the solution you'd like

I'd like to add the ability to add some custom styling to the scroll bars.

Alternatives considered

• Hide the scroll bars and hope the user understands that they can scroll.
• Use the default styles even though they might clash witht hte rest of your UI design

Additional context

No response

[JonasKruckenberg]

I'm pretty certain that styling scrollbars already works and that I've used it in Tauri apps before.

Sadly, even if this didn't work we couldn't do anything about this as we're at the mercy of the webviews here.

To help troubleshoot your issue a bit further though can you provide the output of tauri info?

[benediktms]

@JonasKruckenberg sure, here is my output:

$ tauri info

Environment
  › OS: Mac OS 13.1.0 X64
  › Node.js: 18.12.1
  › npm: 8.19.2
  › pnpm: 7.25.0
  › yarn: 1.22.19
  › rustup: 1.25.1
  › rustc: 1.66.0
  › cargo: 1.66.0
  › Rust toolchain: stable-aarch64-apple-darwin

Packages
  › @tauri-apps/cli [NPM]: 1.2.2
  › @tauri-apps/api [NPM]: 1.2.0
  › tauri [RUST]: 1.2.3,
  › tauri-build [RUST]: 1.2.1,
  › tao [RUST]: 0.15.8,
  › wry [RUST]: 0.23.4,

App
  › build-type: bundle
  › CSP: default-src verve: asset: https://asset.localhost img-src: 'self'
  › distDir: ../dist
  › devPath: http://localhost:1420/
  › framework: Svelte
  › bundler: Vite

App directory structure
  ├─ dist
  ├─ node_modules
  ├─ docs
  ├─ .github
  ├─ src-tauri
  ├─ .git
  ├─ .vscode
  └─ src
✨  Done in 6.63s.

When I looked at the inspector for the webview I could not find any CSS options for editing the scrollbar either...

[nickolasgregory]

I've found that styling scrollbars DOES work (in my environment a least.)

Using CSS from https://www.cssportal.com/css-scrollbar-generator/

> svelte-tauri@0.1.8 tauri
> tauri "info"

[✔] Environment
    - OS: Ubuntu 22.04 X64
    ✔ webkit2gtk-4.0: 2.40.5
    ✔ rsvg2: 2.52.5
    ✔ rustc: 1.71.0 (8ede3aae2 2023-07-12)
    ✔ Cargo: 1.71.0 (cfd3bbd8f 2023-06-08)
    ✔ rustup: 1.26.0 (5af9b9484 2023-04-05)
    ✔ Rust toolchain: stable-x86_64-unknown-linux-gnu (default)
    - node: 16.14.0
    - pnpm: 8.6.12
    - yarn: 1.22.19
    - npm: 8.3.1

[-] Packages
    - tauri [RUST]: 1.4.1
    - tauri-build [RUST]: 1.4.0
    - wry [RUST]: 0.24.3
    - tao [RUST]: 0.16.2
    - @tauri-apps/api [NPM]: 1.4.0
    - @tauri-apps/cli [NPM]: 1.4.0

[-] App
    - build-type: bundle
    - CSP: unset
    - distDir: ../build
    - devPath: http://localhost:5173/
    - framework: Svelte
    - bundler: Vite

[M4n5ter]

scrollbar css like

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

-ms-overflow-style: none;

Doesn't work for me.

cargo tauri info                                                                                

[✔] Environment                                                                                                    
    - OS: Windows 10.0.22631 X64
    ✔ WebView2: 121.0.2277.112
    ✔ MSVC: Visual Studio ���ɹ��� 2022
    ✔ rustc: 1.78.0-nightly (8ace7ea1f 2024-02-07)
    ✔ cargo: 1.78.0-nightly (ccc84ccec 2024-02-07)
    ✔ rustup: 1.26.0 (5af9b9484 2023-04-05)
    ✔ Rust toolchain: nightly-x86_64-pc-windows-msvc (environment override by RUSTUP_TOOLCHAIN)
    - node: 20.11.0
    - npm: 10.2.4

[-] Packages
    - tauri [RUST]: 2.0.0-beta.2
    - tauri-build [RUST]: 2.0.0-beta.1
    - wry [RUST]: 0.35.2
    - tao [RUST]: 0.25.0
    - tauri-cli [RUST]: 2.0.0-beta.1
    - @tauri-apps/api [NPM]: 1.5.3
    - @tauri-apps/cli [NPM]: 2.0.0-beta.1

[-] App
    - build-type: bundle
    - CSP: default-src blob: data: filesystem: ws: wss: http: https: tauri: 'wasm-unsafe-eval' 'self'; style-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-inline' 'wasm-unsafe-eval' 'self'; script-src blob: data: filesystem: ws: wss: http: https: tauri: 'wasm-unsafe-eval' 'self'; connect-src ipc: http://ipc.localhost        
    - frontendDist: ../frontend/dist
    - devUrl: http://127.0.0.1:42069/

But run the code in webview2 console, it works.

document.querySelector('body').style.overflow='scroll';
var style=document.createElement('style');
style.type='text/css';
style.innerHTML='::-webkit-scrollbar{display:none}';
document.getElementsByTagName('body')[0].appendChild(style);