Maptalks 空间与 UI 组件信息框内容支持滚动，可以通过设置 `scrollable` 属性为 `true` 来实现。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Maptalks 信息框滚动示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks@1.4.0/dist/maptalks.min.css">
    <script src="https://cdn.jsdelivr.net/npm/maptalks@1.4.0/dist/maptalks.min.js"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 100%;"></div>
    <div id="infoBox" style="position: absolute; top: 50px; left: 50px; width: 200px; height: 100px; background-color: rgba(255, 255, 255, 0.8); border: 1px solid #ccc; z-index: 999;">
        <div style="padding: 10px;">
            这里是信息框的内容，当内容较多时，可以通过设置 scrollable 属性为 true 来使信息框支持滚动。
        </div>
    </div>
    <script>
        var map = new maptalks.Map('map', {
            center: [116.397428, 39.916527],
            zoom: 10,
            baseLayer: new maptalks.TileLayer('base')
        });
        var infoBox = document.getElementById('infoBox');
        infoBox.style.overflowY = 'auto'; // 设置信息框内容支持垂直滚动
        infoBox.style.scrollbarWidth = 'none'; // 隐藏滚动条
        infoBox.style.msOverflowStyle = 'none'; // IE 浏览器兼容
        infoBox.style.MozOverflowStyle = '-moz-scrollbars-vertical'; // Firefox 浏览器兼容
    </script>
</body>
</html>

在这个示例中，我们创建了一个 Maptalks 地图和一个信息框。通过设置信息框的样式，使其支持垂直滚动。

以下代码亲测有效：

<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>空间与UI组件 - 信息框内容支持滚动</title>
  <style type="text/css">
    html,body{margin:0px;height:100%;width:100%}
    .container{width:100%;height:100%}
    .panel{border-radius:5px;padding:10px;position:absolute;z-index:1;right:10px;top:10px;border:1px solid gray;background-color:white}
    .panel .item{line-height:40px}
    .info-content{height:150px;width:300px;overflow:scroll}
  </style>
  <link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
  <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
  <body>
    <div id="map" class="container"></div>
    <script>
      var baseLayer = new maptalks.TileLayer('base', {
        urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
        subdomains: ['a','b','c','d'],
        attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
      });
      var map = new maptalks.Map('map', {
        center: [114.26012989831725, 30.616193225646924],
        zoom: 18,
        pitch: 60,
        attribution: true,
        zoomControl: true,
        baseLayer: baseLayer
      });
      var layer = new maptalks.VectorLayer('layer', {
      }).addTo(map);
      var point = new maptalks.Marker(map.getCenter());
      layer.addGeometry(point);
      point.setInfoWindow({
        title: 'hello maptalks',
        content: '<div class="info-content"><video controls width="450" height="300" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"></video></div>'
      });
      point.openInfoWindow();
    </script>
  </body>
</html>

此处为隐藏内容，请评论后查看隐藏内容，谢谢！

 您阅读本篇文章共花了：