iPad отключить прокрутку документа, но не прокрутку переполнения div

Question

Я разрабатываю модальные окна с возможностью прокручивания, например, прокрутки. Когда они увольняются, определите overflow: hidden на body и overflow: auto на контейнере модального контейнера. Это очень хорошо работает на настольных браузерах, но мой первый тест на iPad (и я предполагаю, что, вероятно, на iOS в целом) обнаруживает проблему:

Когда прокрутка модального конца заканчивается, если документ длиннее модального прокрутки продолжается.

Я попытался это с намерением только признавайте прокрутки, если это вызвано модальным или контейнера:

// Disable browser scrolling on iOS 
$(document).on('touchmove',function(e) { 
    if (($(e.target).attr('id') != id) && 
    ($(e.target).attr('id') != ('modal-'+id))) { 
     e.preventDefault(); 
    } 
}); 

И это действительно работает делать строго это. Модальные свитки и когда он заканчивается, прокрутка страницы возможна только при прокрутке внутри модального.

У вас есть идея?

Попробуйте в ваших IPADS, если вы хотите (вы должны нажать на кнопку модальный): http://www.onebigrobot.com/beta/altair/transforms-so

Спасибо заранее!

Answer 1

Небольшие изменения являются мощными!

Все проблемы решены с изменением position: absolute на position: fixed на модный контейнер (а также на темную маску фона, если необходимо). Фактически с абсолютным позиционированием модаль работал только потому, что кнопка находилась в верхней части страницы.

С фиксированным позиционированием настольные браузеры прекрасно работают, а на ipad происходит что-то интересное. Когда прокрутка модального конца заканчивается, прокрутка страницы начинает работать, но модально всегда сверху.

Я надеюсь, что этот вопрос может быть полезен для кого-то.