Как выключить фоновый scrolling
при открытии модального окна на css
или js
?
4 ответа
window.onscroll = function(){
return false;
}
-
-
У нас тут всё добровольно ) и пока что ваш ответ решает проблему не лучшим образом. 3 ноя 2017 в 12:24
Добавьте css код, что бы при открытом модальном окне отображалась(была доступна) только область внутри открытого элемента, а остальное было скрыто (недостунпно):
body.modal-open {
overflow: hidden;
}
Вот пример кода на CODEPEN (bootstrap + jquery)
window.addEventListener('scroll', (e) => {
window.scrollTo(0,0);
});
main {
height: 200vh;
position: relative;
z-index: 1;
}
.popup {
position: absolute;
width: 300px;
max-height: 150px;
background-color: #fff;
left: 20px;
top: 20px;
border: 1px solid;
padding: .5em 1em;
overflow: auto;
}
.popup:before {
content: " ";
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.3);
z-index: -1;
}
<main>
<div class="popup">
<p>غينيا واستمر العصبة ضرب قد. وباءت الأمريكي الأوربيين هو به،, هو العالم، الثقيلة بال. مع وايرلندا الأوروبيّون كان, قد بحق أسابيع العظمى واعتلاء.
<p>غينيا واستمر العصبة ضرب قد. وباءت الأمريكي الأوربيين هو به،, هو العالم، الثقيلة بال. مع وايرلندا الأوروبيّون كان, قد بحق أسابيع العظمى واعتلاء.
<p>غينيا واستمر العصبة ضرب قد. وباءت الأمريكي الأوربيين هو به،, هو العالم، الثقيلة بال. مع وايرلندا الأوروبيّون كان, قد بحق أسابيع العظمى واعتلاء.
<p>غينيا واستمر العصبة ضرب قد. وباءت الأمريكي الأوربيين هو به،, هو العالم، الثقيلة بال. مع وايرلندا الأوروبيّون كان, قد بحق أسابيع العظمى واعتلاء.
</div>
</main>
document.body.style.overflow = "hidden"; выключает скролл
document.body.style.overflow = ""; включает скролл
overflow: hidden
?max-height: 100vh
иoverflow: hidden