Scrolling in mobile

[gabifuse]

Hello!

I have the following structure

        <div style={{ height: '100px', width: '300px', overflowY: 'auto', overflowX: 'hidden', background: 'red' }}>
            <TransformWrapper wheel={{ wheelDisabled: true }} panning={{ velocityDisabled: true }} ref={transformComponentRef}>
                {(): JSX.Element => (
                    <TransformComponent
                        contentStyle={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}
                        wrapperStyle={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}
                    >
                        <div style={{ height: '200px', width: '300px', background: 'blue', color: 'white' }}>test</div>
                    </TransformComponent>
                )}
            </TransformWrapper>
        </div>

I want to allow only zooming and when clicking on a button to use the ref and get the zoom back to the initial (this part works perfectly). The problem starts on mobile devices where the native scroll of the user seems to not be working and i cant scroll past the first 100px, even though on desktop scrolling works fine. any idea on why this is and how can i get it to work?

Thanks in advance, Gabi.

[SeanBarker182]

I have this same issue. Did you find a resolution?

[wilderPariona]

any solution?

[ekunitsa]

same problem

[Logan-FE]

any solution on this?