Mapbox Popup 打开后造成页面滚动问题

一个困扰我多天的问题，在我绞尽脑汁，以为是 bug，准备去 github 给官方提 issue 的时候，才发现自己大意了，都是我没仔细读文档的锅

太长不想看版本：

Popup 显示后默认是 focus 状态，如果这个 popup 距离当前位置很远的话，就会造成页面定位到 popup 最初始的位置导致滚动。
解决办法是，添加 popup 时，设置 popup 的 focusAfterOpen 属性为 false 即可：

 let marker = new mapboxgl.Marker().setLngLat([theLng, theLat])
            .setPopup(new mapboxgl.Popup({
               focusAfterOpen: false  // 就是这里
            }).setHTML('<p> bla, bla~.</p>'))
            .addTo(map);

废话较多的版本：

最近在弄的一个页面比较特殊，首页有点像 SPA，分为了几个高度为100%（height： 100%）的区域。而 mapbox 生成的地图只是其中一个部分:

1.jpg

在地图显示区域，点击左边的 Mark1、Mark2 ... 链接 会定位到右边地图相应的 Marker 并显示 Popup 如图：

截屏2021-01-03 00.36.08.png

但是问题来了，当地图当前位置离定位 Marker 的距离特别长的时候，会发生页面滚动的情况（给人的感受就是点击定位链接后页面乱跳）:

3.jpg

在网上各种搜索无果后，准备在 JSFiddle 复现案例（https://jsfiddle.net/sparket42/oL7gt5u1/5），去 github 给官方提 bug issue了，发现，popup 上的链接居然是 focus 状态！

截屏2021-01-03 00.49.31.jpg

对 popup 右键，发现其是 dom 元素，而不是直接画在地图上的。再对比marker 位置和页面滚动的距离，基本可以确定就是 focus 造成了页面滚动。

如图，当要要定位到 Marker1 的时候，Marker1 位置的 popup 就会显示，且其链接为 focus 状态，这个过程是快于地图定位并移动到 Marker1 位置的，所以浏览器就会先向上滚动至 Marker1 的位置，反之 Marker2 就是向下滚动。

截屏2021-01-03 00.53.18.jpg

发现了问题所在后，第一反应竟是想怎么阻止每个 Popup 的 focus 后浏览器的定位动作...
最后在官方文档处（https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup）发现，Popup 是有一个默认为 true的 focusAfterOpen 属性，就是字面意思的 popup 打开后就 focus。

所以，直接把 focusAfterOpen 属性设为 false 就OK了：

 let marker = new mapboxgl.Marker().setLngLat([theLng, theLat])
            .setPopup(new mapboxgl.Popup({
               focusAfterOpen: false  // 就是这里
            }).setHTML('<p> bla, bla~.</p>'))
            .addTo(map);

所以，还是要多看文档....