Как убрать скролл отключив touchmove в iOS Safari?

Question

[Zhurbin]

При открытии меню по кнопке отключаю touchmove для области контента, чтобы нельзя было её скроллить, а скроллилось только меню. В Android и Chrome devtools (emulate iPhone 5) все работает ок, а в ios safari область все равно скроллится, если проскроллить до конца меню. Вариант с position fixed контент области не прокатит т.к. нужно чтобы меню оставалось на том же уровне, когда вызывали меню. Пробовал отключать все touch события, пробовал другие методы его отключения у всего документа и возврата для меню - не помогло. Как можно решить данный вопрос? Или быть может как по-другому можно реализовать такой способ открытия меню? По мотивам этой ошибки накатал демку,:

Код: jsbin.com/suxaru/1/edit?html,css,output
Пример для просмотра на мобилке: jsbin.com/suxaru/1

Comments

[Ольга Жижка]

Здравствуйте , помогите пожалуйста, у меня такая же проблема с боковым меню на ios, подскажите как вы справились с тем, чтобы сайт не скролился при открытом меню, спасибо!

[Zhurbin]

Ольга Жижка: ответил в решениях

Answer 1

[Zhurbin]

Чисто только версткой проблему решить не удалось, в итоге решил в меню запретить нативный скролл и добавить имитацию скролла на js. Для этого использовал библиотечку https://github.com/cubiq/iscroll .Это решило проблему.

Comments

[Ольга Жижка]

спасибо за ответ

Answer 2

[Александр]

Возможно был забыт "wheel". Попробуйте обработать "wheel" на контейнере меню, но запретить распространение дальше (bubbling).
Что-то вроде этого:

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

Answer 3

[FKERTUSH]

Может быть эта статья поможет решить проблему?

Сам недавно с таким столкнулся.
https://webformyself.com/predotvrashhenie-cepnoj-p...