Попытка перехватить событие прокрутки на компоненте со скрытым переполнением тела на мобильном устройстве (React)

Question

Я не могу зафиксировать какое-либо полезное событие на компоненте, когда он сенсорный, для мобильных устройств, а не для мыши на рабочем столе.

В теле скрыто переполнение, так как я хочу создать свой собственный свиток. Мой компонент на 100% / 100vh с событием onWheel, которое дает мне event.deltaY, который я могу использовать для создания эффекта, которого я добиваюсь (это работает как ожидалось на рабочем столе). Я не могу заставить это работать на мобильном телефоне. Я понимаю, что onWheel, скорее всего, не будет работать, так как работает на основе касания, но onTouchMove, onScroll и т. Д. Также ничего не запускают.

Я также получаю эффект "отскока" на мобильном устройстве из-за попытки прокручивать страницы до конца страницы, но я просто хочу, чтобы мой телефон распознавал событие сенсорной прокрутки в элементе div, чтобы я мог выполнять свои переводы css.

Компонент:

import React, { Component } from "react"
import styled from "styled-components"
import { P } from "../styles/Typography.js"
import { Box } from "./Shapes.js"

export default class ParallaxWrapper extends Component {

    state = {

        offset: 0,
    }

    handleMotion = (event) => {

        const { offset } = this.state
        const intensity = .2

        let delta = event.deltaY * intensity

        delta = offset + delta > 0 ? (offset + delta) : 0

        this.setState(state => ({ offset: delta }))
    }

    render() {

        const { offset } = this.state

        return (

            <ScrollContainer onWheel={ this.handleMotion }>
                <Inner style={{ transform: `translate3d(0, -${ offset * .75 }px, 0)` }}>
                    <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse hendrerit sapien eu quam vulputate, sed auctor risus viverra.</P>
                    <Box central style={{ transform: `translate3d(${ offset * .05 }%, 0, 0)`, width: `${ 400 + (offset * .1) }px` }}>Something</Box>
                </Inner>
            </ScrollContainer>
        )
    }
}

const ScrollContainer = styled.div`

    position: relative;
    cursor: pointer;
    width: 100%;
    height: 100vh;
    overflow: hidden;
`

const Inner = styled.div`

    position: relative;
    cursor: pointer;
    width: 100%;
    height: 100%;
`

CSS:

html, body {

    min-height: 100%;
    overflow: hidden;
}

В настоящее время на мобильном устройстве ничего не происходит, я не могу отловить события, когда на контейнере нет прокрутки переполнения, но суть в том, что я не хочу использовать обычную прокрутку.

Также обратите внимание, что я не могу использовать плагины jQuery, например React.