@monitorcasalab, you can do it with a little custom CSS. Here’s an example
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
[
dbc.Row(
[
dbc.Col(
html.Div(
html.H1("Scrollbars", className="text-center"),
className="p-3 gradient",
),
width=6,
style={"overflow": "scroll", "height": "400px"},
),
dbc.Col(
html.Div(
html.H1("No scrollbars", className="text-center"),
className="p-3 gradient",
),
width=6,
style={"overflow": "scroll", "height": "400px"},
className="no-scrollbars",
),
]
)
]
)
if __name__ == "__main__":
app.run_server(debug=True)
and the CSS that I put in assets/style.css
.gradient {
/* background gradient so that we can see the scrolling */
background: rgb(2, 0, 36);
background: linear-gradient(0deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 17%, rgba(0, 212, 255, 1) 100%);
/* set height so that element is scrollable */
height: 1000px;
}
.no-scrollbars::-webkit-scrollbar {
display: none;
}
.no-scrollbars {
scrollbar-width: none;
}
Did a quick test and it works on Safari, Firefox and Chrome for me.