如何为Python Folium弹出窗口（Popup）添加滚动条？

Folium本身没有直接提供滚动条配置项，但可以通过自定义HTML内容实现弹窗滚动效果，核心是用CSS设置固定高度和垂直溢出属性。

基础实现代码 #

import folium

# 模拟你的API返回的大量数据
api_data = "从API获取的长内容..." * 40

# 创建地图实例
map_obj = folium.Map(location=[31.2304, 121.4737], zoom_start=13)

# 构造带滚动条的弹窗HTML
scrollable_popup = f"""
<div style="height: 220px; overflow-y: auto; padding: 10px;">
    {api_data}
</div>
"""

# 绑定弹窗到标记点
folium.Marker(
    location=[31.2304, 121.4737],
    popup=folium.Popup(scrollable_popup, max_width=350)
).add_to(map_obj)

# 保存地图
map_obj.save("scrollable_popup_map.html")

关键CSS属性说明 #

• height: 220px：固定弹窗内容区域的高度，可按需调整数值
• overflow-y: auto：当内容高度超过容器时，自动显示垂直滚动条
• padding: 10px：避免内容紧贴弹窗边框，提升可读性
• max_width=350：限制弹窗最大宽度，防止内容过度拉伸

结构化API数据优化 #

如果API返回的是结构化数据（如字典、列表），可以格式化后再放入滚动容器，让内容更清晰：

# 模拟结构化API数据
structured_data = [
    {"站点名称": "人民广场站", "客流量": "12.5万/天", "运营时间": "5:30-23:30"},
    {"站点名称": "陆家嘴站", "客流量": "18.2万/天", "运营时间": "5:25-23:40"},
    # 更多数据条目...
]

# 生成HTML列表
content_html = "<ul style='margin: 0; padding-left: 20px;'>"
for item in structured_data:
    content_html += f"<li><strong>{item['站点名称']}</strong><br>客流量: {item['客流量']}<br>运营时间: {item['运营时间']}</li>"
content_html += "</ul>"

# 构造滚动弹窗
popup_html = f"""
<div style="height: 280px; overflow-y: auto; padding: 8px;">
    {content_html}
</div>
"""

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