search

nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
https://ui.nuxt.com
MIT License
4.06k stars 518 forks source link

Can you support the consistent style of the Scrollbar #2022

Closed ikxin closed 3 months ago

ikxin commented 3 months ago

Description

In MacBook Pro, when using the mouse

QQ_1722957097034

When using the touchpad

QQ_1722957140767

Additional context

No response

benjamincanac commented 3 months ago

This is not possible, it's the Mac OS system that defines how scrollbars are displayed: https://muffinresearch.co.uk/osx-remove-scrollbars-that-appear-when-using-a-mouse/

You should have this behavior on every website.

ikxin commented 3 months ago

I saw at Arco Design that they support custom Scrollbar when using the mouse.

https://arco.design/vue/en-US/component/scrollbar

QQ_1722959498632

ikxin commented 3 months ago

@benjamincanac

ikxin commented 3 months ago

Another example is Naive UI.

QQ_1722959767577

benjamincanac commented 3 months ago

Nuxt UI Pro does that for Windows users automatically. I'm not sure to see the link with @nuxt/ui though, you can apply this to your website if you like.

ikxin commented 3 months ago

@benjamincanac The Arco design and Naive UI mentioned above can both achieve this effect on macOS. However, from what I have seen, they do not directly modify ::-webkit-scrollbar, but instead hide the native scrollbar using display: none;, then control the style through another DOM element, and finally encapsulate it into a Scrollbar component.

benjamincanac commented 3 months ago

It's due to their Scrollbar component: https://www.naiveui.com/en-US/os-theme/components/scrollbar. We have no plan to make such component at this time 😬