Scrollify - отключить прокрутку раздела, когда модальное открыто
Я использую https://projects.lukehaas.me/scrollify/ на своем веб-сайте, и у меня возникают проблемы с отключением функции прокрутки после открытия модального окна. Я использую стандартное действие onclick, чтобы открыть модальное окно, чтобы я мог вставить что-то туда, но я не уверен, что именно.
Это моя инициализация Scrollify:
jQuery.scrollify({
section : ".vc_section",
sectionName : "section-name",
interstitialSection : "",
easing: "easeOutExpo",
scrollSpeed: 2000,
offset : 0,
scrollbars: true,
standardScrollElements: "footer",
setHeights: true,
overflowScroll: true,
updateHash: false,
touchScroll: true,
before:function(i,panels) {
var ref = panels[i].attr("data-section-name");
if(ref === "first") {
jQuery("#hero-container").removeClass("hidden");
}
if(ref === "second") {
jQuery("#hero-container").addClass("hidden");
}
},
after:function() {},
afterResize:function() {},
afterRender:function() {}
});
Затем я вызываю модал с помощью простой функции onclick:
jQuery('.schedule-visit-toggle, .schedule-visit-toggle a').on('click touchstart', function(evt) {
evt.stopPropagation();
evt.preventDefault();
jQuery('#schedule-visit-modal').foundation('open');
});
3 ответа
Вызов $.scrollify.disable()
отключить Scrollify при открытии модального окна.
Я постараюсь дать ему шанс в любом случае..
Я думаю, когда модальный не отображается, он имеет display: none;
в пределах его css.
Итак, что вы можете сделать, это:
if ($('#yourModalID').css('display') === 'none') {
scrollify
} else {
do not scrollify
});
Может быть, это не работает, но стоит попробовать..
Я добавляю этот код в afterRender:function() {}
$(".mobile-menu-toggle").on("click",function() {
$("body").toggleClass("layout-open");
if($("body").hasClass('layout-open')){
$.scrollify.disable();
}else{
$.scrollify.enable();
}
});
и добавляем в стиле css
.layout-open{
touch-action: none;
}
Работает отлично