scrollbar can't hide

[yutayouguan]

The scrollbar can't be hidden. I need to hide the scrollbar all the time because I'm creating an iconbar.

python:3.12.1 reflex: 0.5.9

                rx.scroll_area(
                    rx.vstack(
                        rx.foreach(cls.alternate_icons, dynamic_icon),
                    ),
                    id="scrollbar",
                    height="100%",
                    width="100px",
                    scrollbars="vertical",
                    type="hover",
                    # BUG: 滚动条无法隐藏
                    style=rx.Style(
                        {
                            "scrollbar-width": "none",  # Firefox
                            "-ms-overflow-style": "none",  # IE and Edge
                            "::-webkit-scrollbar": {"display": "none"},
                        }
                    ),
                ),

[masenf]

i think you need to prefix ::-webkit-scrollbar with an ampersand like &::-webkit-scrollbar

[yutayouguan]

Hi masenf: I has add & prefix as below, but it's don't work

    rx.scroll_area(
                    rx.vstack(
                        rx.foreach(cls.alternate_icons, dynamic_icon),
                    ),
                    id="scrollbar",
                    height="100%",
                    width="100px",
                    scrollbars="vertical",
                    type="hover",
                    # BUG: 滚动条无法隐藏
                    style=rx.Style(
                        {
                            "&scrollbar-width": "none",  # Firefox
                            "&-ms-overflow-style": "none",  # IE and Edge
                            "&::-webkit-scrollbar": {"display": "none"},
                        }
                    ),
                ),

[yutayouguan]

i think you need to prefix ::-webkit-scrollbar with an ampersand like &::-webkit-scrollbar

Hi masenf: Can you let rx.scroll_area() conponents type props add hide value(type=hide)？ Thanks, I try all way, include extra css and rx.scroll_area global style , It's not work, as below:

theme = rx.theme(
    appearance="inherit",
    radius="medium",
    has_background=True,
    color_mode="inherit",
)
stylesheets = [
    "/css/home.css",
    "/css/font.css",
]
style = {
    rx.scroll_area: {
        "width": "100%",
        "height": "100%",
        "overflow-y": "scroll",
        "overflow-x": "hidden",
        "padding": "0",
        "margin": "0",
        "box_sizing": "border-box",
        "scrollbar_width": "none",
        "&::-webkit-scrollbar": {"display": "none"},
    }
}

app = rx.App(
    theme=theme,
    html_lang="zh-CN",
    style=style,
    stylesheets=stylesheets,
)