一个困扰我多天的问题，在我绞尽脑汁，以为是 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 生成的地图只是其中一个部分:
在地图显示区域，点击左边的 Mark1、Mark2 ... 链接 会定位到右边地图相应的 Marker 并显示 Popup 如图：
但是问题来了，当地图当前位置离定位 Marker 的距离特别长的时候，会发生页面滚动的情况（给人的感受就是点击定位链接后页面乱跳）:
在网上各种搜索无果后，准备在 JSFiddle 复现案例（https://jsfiddle.net/sparket42/oL7gt5u1/5），去 github 给官方提 bug issue了，发现，popup 上的链接居然是 focus 状态！
对 popup 右键，发现其是 dom 元素，而不是直接画在地图上的。再对比marker 位置和页面滚动的距离，基本可以确定就是 focus 造成了页面滚动。
如图，当要要定位到 Marker1 的时候，Marker1 位置的 popup 就会显示，且其链接为 focus 状态，这个过程是快于地图定位并移动到 Marker1 位置的，所以浏览器就会先向上滚动至 Marker1 的位置，反之 Marker2 就是向下滚动。
发现了问题所在后，第一反应竟是想怎么阻止每个 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);
所以，还是要多看文档....
