mapbox：在页面顶部向上滚动时激活缩放；地图缩小时向下移动页面

Question

当页面滚动到顶部并且用户不断向上滚动时，我希望 mapbox 能够控制滚轮

对于向下滚动：当地图一直缩小（向下滚动）时，我想控制滚轮回到浏览器，这样他们就可以向下滚动（直到他们滚动回到顶部再次）。

也许有更好的方法

现在有点用，但它有问题，我不确定如何改进它

这是我目前拥有的：


    map.on('zoomstart', () => {
        if (10 < window.scrollY) map.scrollZoom.disable()
    })

    map.on('idle', () => {
        if (window.scrollY <= 10) map.scrollZoom.enable()
    })


    map.on('zoomend', async () => {
        const [[s, w], [n, e]] = map.getBounds().toArray()

        if ((w < -179.9 && 179.9 < e) || (s < -73.9 && 82.9 < n)) {
            window.scrollTo({ top: window.scrollY + window.innerHeight * 0.1 })
            map.fitBounds(
                [
                    [170, 25],
                    [-170, 25],
                ],
                { animate: false },
            )
        }
    })

Answer 1

这样效果更好

map.on('zoom', () => {
    const [[w, s], [e, n]] = map.getBounds().toArray()

    if ((w < -179.9 && 179.9 < e) || (s < -73.9 && 82.9 < n)) {
        window.scrollTo({top: window.scrollY + window.innerHeight * 0.1})
    } else {
        if (0 < window.scrollY)
            window.scrollTo({ top: 0, behavior: 'smooth' })
    }
})

mapbox：在页面顶部向上滚动时激活缩放；地图缩小时向下移动页面

mapbox: activate zoom when scrolling up at the top of the page; move page down when map is zoomed out

javascript

mapbox-gl-js