Leaflet列表标记：透明度、背景色修改及滚动设置咨询

1. 修改列表的透明度及背景颜色 #

Leaflet的列表标记（不管是自带的图层列表还是自定义的标记列表）本质都是DOM元素，直接通过CSS即可修改样式：

• 若你是自定义的标记列表容器，先给容器添加类名（比如marker-list），再写如下CSS：

.marker-list {
  /* 用rgba同时设置背景色和透明度，最后一位0-1控制透明度 */
  background-color: rgba(255, 255, 255, 0.8);
  /* 也可单独设置整体透明度（会影响内部文字） */
  /* opacity: 0.8; */
}

• 若使用Leaflet自带的图层列表控件（L.Control.Layers），直接针对默认类名写CSS：

.leaflet-control-layers {
  background-color: #f5f5f5; /* 自定义背景色 */
  opacity: 0.9; /* 整体透明度 */
}

2. 设置滚动属性实现内容滚动 #

通过CSS给列表容器设置最大高度和垂直滚动属性，当内容高度超过容器最大高度时，自动出现滚动条：

• 自定义标记列表的情况：

.marker-list {
  max-height: 300px; /* 根据需求设置最大高度 */
  overflow-y: auto; /* 仅垂直方向滚动 */
}

• 自带图层列表的情况，针对内部列表容器修改：

.leaflet-control-layers-list {
  max-height: 250px;
  overflow-y: auto;
}

注意：如果是完全自定义的控件，要确保列表容器的父元素没有设置overflow: hidden，否则滚动条可能无法正常显示。

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