scrollViewer override scroll down event on Iphone with version IOS 11

Hi) Please help me figure it out. The problem can be seen in the video.That is, it is not possible to scroll down the scrollbar text, the canvas itself is scrolled. Tried overflow hidden, didn’t help, scroll didn’t disappear There was an idea with eventPreventDefault, but I don’t know how to get the scrollViewer to work. Digging through the babylon js sources, I found the _updateValueFromPointer method, most likely it is called when it is necessary to scroll down the scroll bar, but I don’t know what to do with this method.
There is still a small problem, but this is no longer so important, any click on the canvas blinks, I thought it was tabindex, turned it off, it didn’t help. Tried disabling the engineResize event didn’t help either.

Does the problem is about haviong the top and bottom app bar to appear?

Not sure to know what I should look at :slight_smile:

No, you just don’t need to display) for this, the slide up hand feature is made. The problem is that if I want to scroll the scroll bar on the canvas, it is not the scroll bar that scrolls, but the canvas itself. I had an idea to use preventDefault, tried it, and it turned out that everything stopped scrolling))

document.body.addEventListener("touchstart", function (e) {


        }, { passive: false });

If I knew what I need to add to this code to make the scroll bar on the canvas scroll
We need to make the scroll bar on the canvas work as expected, so that it can be scrolled

If you do not understand the problem, I will try to explain it better, write down everything point by point, etc. If only it helps to solve the problem

Stick it all in a wrapper div and set the css styling of the wrapper to fixed?

I think you are trying to get rid of that mobile scroll effect right?

There are a couple solutions for that:

I like using the fixed solution personally. Then like pointer-events=none on the wrapper and on the canvas pointer-events= initial?

1 Like

Regarding this, the bounce effect is not exactly what is shown in the video, but you are right this problem will be solved that way. The problem on the video is relevant only for this Iphone se device, on other devices, including the android system, everything works fine. That is, the scroll bar itself is scrolled and not the page itself

I didn’t quite understand what you wanted to say here)) But thanks for the answer!)

I see the solution to this problem in using preventDefault for the touchstart event. Thus, the page itself will not scroll, but also the scroll bar on the canvas will not scroll. And here it is necessary to move it somehow programmatically, exactly how I have not figured out yet, because I do not know what is going on under the hood of the scrollViewer babylon.
js. I dug in there, but have not yet figured out exactly how the interception of the event goes and what is done next

Once again, regarding the problem in the video, when a scroll bar appears on the canvas, it is impossible to scroll down, the page itself (canvas) scrolls.

Can you maybe repro in the playground ? It is tough to help you without it

Yes, but in order to see this bug, you need an iphone with the IOS 11 version or its emulator) I will make a version for the playground a little later

@cedric or @sebavan are our ios champions:)

1 Like

@Cedric would be so coool if you could have a look today ??? my end of week looks a bit like Hell :slight_smile:

If not let me know and I ll dig in.

@MartynovOleg would be so cool to have the repro indeed :slight_smile: also, is it only ios 11, are the other versions ok ?

I can do that tomorrow…I’m finishing fixing other issues :frowning:

Perfect thanks a lot It will give time to @MartynovOleg to create the repro :slight_smile:

1 Like

Yes, that’s right) For 11 and probably versions below) A working version on IOS 11 will be enough

Here, as I understand it, the same problem is discussed, and there the solution is to scroll the element programmatically

Did it solve your issue?

This will solve my problem if you tell me how to programmatically move the scrollViewer)
I wrote above that I could not figure out how in babylon js, programmatically scroll the ScrollViewer :pensive: