Scrolling both the page, and a Scrollbooster element at the same time

[alexpi]

Hello. I have this (simplified) page codepen-link in which there is some content at the top, and a scrollable map below. I want touch device users to be able to both scroll the page vertically, and scroll/drag the map inside its container horizontally. The problem is that the map motion is janky when the page is scrolling at the same time. Do you think the thing I am trying to achieve is possible?

[Raikojou]

For anyone looking for solution on similar cases, I've found this to be the best bandaid solution:

let sb = null

function initSB() {
  if (sb) return
  sb = new ScrollBooster({...})
}

function destroySB() {
  if (!sb) return
  sb.destroy()
  sb = null
}

function handleSB() {
  if ('ontouchstart' in window || navigator.maxTouchPoints > 0) {
    destroySB()
    // you might want to set overflow to auto to give back native touch scrolling
  } else {
    initSB()
    // same as before, you might want to set overflow hidden to trigger scrollbooster
  }
}

Only tested with mobile (Android: chrome & native android browser, iPhone: chrome and safari), haven't tested on any tablets or touch-screen laptops, but theoretically it's safe.