2015-03-21 2 views
1

Я эту установку HTML ...как предотвратить прокрутку фиксированного элемента

body 
    .top 
    .content 

сверху фиксируется на весь экран всплывающее окно с каким-либо другим содержанием в нем. Однако, пока прокрутка заканчивается в .top> ul, элемент фона начинает прокручиваться. Это очень тошнотворно и делает сайт медленным на планшетах.

На планшетах, даже когда я добавляю переполнение, спрятанное на кузове с помощью jquery, оно не предотвращает по какой-либо причине прокрутку фона даже иногда, когда оно не достигнуто.

Я не хочу прокрутки фоновой страницы, когда всплывающее окно находится вверху страницы. Предположим, это новый слайд.

Что я могу сделать предпочтительной структурой, а затем css и, наконец, js.

Demohttp://jsfiddle.net/techsin/0bv9g31k/

* {padding: 0; margin: 0;} 
.top { 
    position: fixed; 
    background-color: rgba(0,0,0,.3); 
    height: 100%; 
    width: 100%; 
    overflow: auto; 
} 

ul { 
    text-align: center; 
    background-color: rgba(23,44,134,.8); 
    color: #fff; 

    box-sizing: border-box; 
    overflow: auto; 
    height: 300px; 
    width: 50%; 
    margin: auto; 
    position: absolute; 
    top: 0; bottom: 0; 
    left:0; 
    right:0; 
    overflow: hidden; 
} 

.cont { 
    width: 400px; 
    margin: auto; 
} 

ответ

5

Эти функции замораживать и размораживать body элемент, позволяя детям прокрутки, если они имеют соответствующий overflow свойство:

function freeze() { 
    var top= window.scrollY; 

    document.body.style.overflow= 'hidden'; 

    window.onscroll= function() { 
    window.scroll(0, top); 
    } 
} 

function unfreeze() { 
    document.body.style.overflow= ''; 
    window.onscroll= null; 
} 

Working Fiddle

решение
+0

У этого есть побочный эффект сброса прокрутки вверх, поэтому, если использование прокручивается на 1000 пикселей ниже открывающей и закрывающей вкладки, оно должно быть 0 очень раздражающим –

+0

У этого есть также побочные эффекты, если я прокручиваю chikdre фиксированного элемента, не прокручиваю, может быть, я не использовал его right –

+0

да без проблем спасибо –

0

Я полагаю, вы найдете решение здесь, в частности, ответ Трой Элфорд: Prevent scrolling of parent element? Я подозреваю, ваш вопрос будет помечен как дубликат.

Я бы добавил это в качестве комментария к вашему вопросу, но пока у меня недостаточно очков репутации. Я также не чувствую себя хорошо, пытаясь передать любые ответы на этот вопрос, как мои собственные, поэтому я просто отвечу на эту ссылку и надеюсь, что она вам поможет.

+0

принято отвечать является не работает в данном примере он представил –

+0

Вы посмотрели на ответ Троя Алфорда? Хотя это и не принято, он, безусловно, кажется более успешным. –

Смежные вопросы