2016-06-14 3 views
0

Итак, на данный момент я занимаюсь тестированием на iPhone и iPad и замечаю очень раздражающую ошибку в отношении прокрутки. Так что на данный момент у меня есть основной страницы так:Отключить прокрутку на iPad, iPhone, когда активна фиксированная позиция div

<body> 
<div> 
Content of my website... 
<button>This button uses jQuery to add a class to the fixed-form div</button> 
</div> 
<div class="fixed-form"> 
<form> 
</form> 
</div> 
</body> 

Это очень простой HTML пример, который показывает свою основную область содержимого внутри тела, однако я также есть DIV называется fixed-form, когда кнопка нажата область содержимого этого добавляет класс со следующим моделированием на fixed-form DIV:

z-index:0; 
    color:#fff; 
    position: fixed; 
    height: 100% !important; 
    overflow-y:auto; 
    -webkit-overflow-scrolling: touch; 
    overflow-x:hidden; 
    top:0; 
    width:100%; 
    z-index:999 !important; 

в fixed-form ДИВ затем закрывает окно просмотра. Проблема в том, что контент/тело за fixed-form все еще прокручивается, а элементы по-прежнему доступны для кликов. Разумеется, z-index остановил бы это, но это не так. Любая идея, почему это может произойти? Я просто хотел бы полностью отключить весь контент, который не является отключенным div от fixed-form, от прокрутки и кликабельности.

UPDATE: Пока я попытался добавить переполнение: скрытый до содержимого div, однако это останавливает горизонтальную прокрутку, но не влияет на проблему с вертикальной прокруткой.

Благодаря

ответ

1

Вы должны добавить class на body вместо div элемента. И добавьте следующие css на body, когда активен div.

body.form-active { 
    overflow: hidden; 
    height: 100%; 
} 

$('button').click(function() { 
 
    $('body').toggleClass('form-active'); 
 
});
body.form-active { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
.fixed-form { 
 
    background: #000; 
 
    z-index:0; 
 
    color:#fff; 
 
    position: fixed; 
 
    height: 100% !important; 
 
    overflow-y:auto; 
 
    -webkit-overflow-scrolling: touch; 
 
    overflow-x:hidden; 
 
    top:0; 
 
    width:100%; 
 
    z-index:999 !important; 
 
    display: none; 
 
} 
 
.form-active .fixed-form { 
 
    display: block; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 
<div> 
 
Content of my website... Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website...Content of my website... 
 
<button>This button uses jQuery to add a class to the body</button> 
 
</div> 
 
<div class="fixed-form"> 
 
    Form content Goes here... 
 
    <button>This button uses jQuery to add a class to the body</button> 
 
<form> 
 
</form> 
 
</div> 
 
</body>

1

Я seached точную причину этого ... Но ничего не могу найти реальное ясное.
Кажется, что z-индексы управляются по-разному на IOS, которые придают большое значение «контексту стекирования».

Найдено this explanation:

(...) в конечном счете, контекст, укладка позиционированного ребенка находится под контролем любого предка, который имеет позицию, определенную и это г-индекс этого конечных расположеннымов предка, который диктует куда отправятся все дети. Позиционированный родитель с z-индексом 1 становится «атомарным», и все его дети будут эффективно быть z-индексом 1 в отношении элементов вне этого контекста укладки.

Решение, которое я видел в парах ответов на форуме для аналогичной проблемы, заключается в использовании CSS 3d-перевода вместо z-indexes.

Вы можете попробовать это на fixed-form:

-ms-transform: translate3d(0,0,10); 
-webkit-transform: translate3d(0,0,10); 
transform: translate3d(0,0,10); 

Wich является «эквивалент» к z-index: 10.