CODEWITHSUNDEEP
javascriptmapbox-gl-js
jaksco
jaksco

Reputation: 541

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

I would like mapbox to have control over the scroll-wheel when the page is scrolled to the top and the user keeps scrolling up

For scrolling down: when the map is zoomed all the way out (scrolling down), I want control over the scroll-wheel to go back to the browser so they can scroll down (until they scroll back to the top again).

maybe there is a better way to do this

right now it kind of works but it is buggy and I'm not sure how to improve it

This is what I have so far:


    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 },
            )
        }
    })

Upvotes: 1

Views: 596

Answers (1)

jaksco
jaksco

Reputation: 541

this works much better

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' })
    }
})

Upvotes: 1

Related Questions