How to remove scroll by disabling touchmove in iOS Safari?

Question

css

When opening the menu by the button, I disable touchmove for the content area so that it cannot be scrolled, but only the menu scrolls. In Android and Chrome devtools (emulate iPhone 5) everything works ok, but in ios safari the area still scrolls if you scroll to the end of the menu. The option with position fixed area content will not work. you want the menu to stay at the same level when the menu is called. Tried to turn off all touch events, tried other methods of turning it off for the entire document and returning for the menu - it did not help. How can this issue be resolved? Or maybe how else can you implement this way of opening the menu? Based on this error, I dashed off a demo:
Code: jsbin.com/suxaru/1/edit?html ,css,output
Example for viewing on a mobile phone: jsbin.com/suxaru/1

Answer 1

It was not possible to solve the problem purely only by layout, in the end I decided to disable native scrolling in the menu and add scrolling imitation to js. For this I used the library https://github.com/cubiq/iscroll . This solved the problem.

Answer 2

Perhaps "wheel" was forgotten. Try to handle "wheel" on the menu container, but prevent further propagation (bubbling).
Something like that:

function wheelHandler (e) {
  e = e || window.event;
  menuWrapper.scrollTop += Number( e.deltaY || (e.detail&&e.detail*2) || (e.wheelDelta&&-(e.wheelDelta / 10)) );
  e.preventDefault();
};