CODEWITHSUNDEEP
jquerycssjquery-scrollify
Keith Petrillo
Keith Petrillo

Reputation: 161

Scrollify - Disable section scrolling when modal is open

I am using https://projects.lukehaas.me/scrollify/ on my website and I am having trouble disabling it's scroll functionality after I open a modal. I'm using a standard onclick action to open the modal so I'm able to inject something in there but I'm not sure what.

This is my Scrollify initialization: 

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() {}
});

Then I call a modal by a simple onclick function:

    jQuery('.schedule-visit-toggle, .schedule-visit-toggle a').on('click touchstart', function(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    jQuery('#schedule-visit-modal').foundation('open');
});

Upvotes: 1

Views: 3581

Answers (3)

Денис Жирный
Денис Жирный

Reputation: 1

I add this code in afterRender:function() {}

$(".mobile-menu-toggle").on("click",function() {
      $("body").toggleClass("layout-open");
       if($("body").hasClass('layout-open')){
          $.scrollify.disable();
       }else{
           $.scrollify.enable();
        }
});

and add in style css

 .layout-open{
    touch-action: none;
}

It is working perfectly

Upvotes: 0

Luke Haas
Luke Haas

Reputation: 692

Call $.scrollify.disable() to disable Scrollify when the modal is opened.

Upvotes: 3

Serge Inácio
Serge Inácio

Reputation: 1382

I will try to give it a shot anyway..

I guess when the modal is not shown it has display: none; within its css.

So what you could do is:

if ($('#yourModalID').css('display') === 'none') {
  scrollify
} else {
    do not scrollify
});

May be it doesn't work, but worth a shot..

Upvotes: 0

Related Questions