Streamlit页面滚动条过窄求助：Plotly宽图表场景下样式调整

Streamlit本身没有提供直接调整滚动条样式的API，但可以通过注入自定义CSS来修改滚动条外观，让它更易识别和操作。以下是具体实现方法：

方法：注入自定义CSS样式 #

通过st.markdown配合unsafe_allow_html=True，将自定义CSS添加到页面中，修改滚动条的宽度、颜色等属性：

import streamlit as st
import plotly.express as px
import pandas as pd

# 生成测试用的极宽数据集
df = pd.DataFrame({f"Column_{i}": range(50) for i in range(30)})
fig = px.line(df)

# 注入自定义CSS调整滚动条样式
st.markdown("""
<style>
/* 全局滚动条样式（WebKit内核浏览器：Chrome、Edge、Safari） */
::-webkit-scrollbar {
    width: 16px; /* 垂直滚动条宽度 */
    height: 16px; /* 水平滚动条高度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 8px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 8px;
    border: 3px solid #f1f1f1; /* 增加内边距让滑块更饱满 */
}

/* 滑块hover状态 */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 兼容Firefox的滚动条样式 */
* {
    scrollbar-width: thick;
    scrollbar-color: #888 #f1f1f1;
}

/* 可选：仅针对Plotly图表容器的滚动条 */
.stPlotlyChart > div {
    overflow: auto;
}
</style>
""", unsafe_allow_html=True)

# 展示Plotly图表
st.plotly_chart(fig, use_container_width=True)

关键说明 #

• 调整width和height的值可以控制滚动条粗细，数值越大滚动条越宽。
• 修改background属性可自定义滚动条轨道和滑块的颜色，适配页面风格。
• 针对Plotly容器的样式（.stPlotlyChart）可确保仅图表区域的滚动条被修改，不影响页面其他部分。若Streamlit版本更新后样式失效，可通过浏览器开发者工具查看图表容器的最新类名，替换CSS中的选择器。

内容的提问来源于stack exchange，提问作者Ramon