Disable background scrolling when a modal is enabled

Question

I am using a template with the following code to handle scrolling:

Here is the template .

This is the javascript code for scrolling, I can post the html and css if needed but it is large.

 // @codekit-prepend "/vendor/hammer-2.0.8.js"; $( document ).ready(function() { // DOMMouseScroll included for firefox support var canScroll = true, scrollController = null; $(this).on('mousewheel DOMMouseScroll', function(e){ if (!($('.outer-nav').hasClass('is-vis'))) { e.preventDefault(); var delta = (e.originalEvent.wheelDelta) ? -e.originalEvent.wheelDelta : e.originalEvent.detail * 20; if (delta > 50 && canScroll) { canScroll = false; clearTimeout(scrollController); scrollController = setTimeout(function(){ canScroll = true; }, 800); updateHelper(1); } else if (delta < -50 && canScroll) { canScroll = false; clearTimeout(scrollController); scrollController = setTimeout(function(){ canScroll = true; }, 800); updateHelper(-1); } } }); $('.side-nav li, .outer-nav li').click(function(){ if (!($(this).hasClass('is-active'))) { var $this = $(this), curActive = $this.parent().find('.is-active'), curPos = $this.parent().children().index(curActive), nextPos = $this.parent().children().index($this), lastItem = $(this).parent().children().length - 1; updateNavs(nextPos); updateContent(curPos, nextPos, lastItem); } }); $('.cta').click(function(){ var curActive = $('.side-nav').find('.is-active'), curPos = $('.side-nav').children().index(curActive), lastItem = $('.side-nav').children().length - 1, nextPos = lastItem; updateNavs(lastItem); updateContent(curPos, nextPos, lastItem); }); // swipe support for touch devices var targetElement = document.getElementById('viewport'), mc = new Hammer(targetElement); mc.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL }); mc.on('swipeup swipedown', function(e) { updateHelper(e); }); $(document).keyup(function(e){ if (!($('.outer-nav').hasClass('is-vis'))) { e.preventDefault(); updateHelper(e); } }); // determine scroll, swipe, and arrow key direction function updateHelper(param) { var curActive = $('.side-nav').find('.is-active'), curPos = $('.side-nav').children().index(curActive), lastItem = $('.side-nav').children().length - 1, nextPos = 0; if (param.type === "swipeup" || param.keyCode === 40 || param > 0) { if (curPos !== lastItem) { nextPos = curPos + 1; updateNavs(nextPos); updateContent(curPos, nextPos, lastItem); } else { updateNavs(nextPos); updateContent(curPos, nextPos, lastItem); } } else if (param.type === "swipedown" || param.keyCode === 38 || param < 0){ if (curPos !== 0){ nextPos = curPos - 1; updateNavs(nextPos); updateContent(curPos, nextPos, lastItem); } else { nextPos = lastItem; updateNavs(nextPos); updateContent(curPos, nextPos, lastItem); } } } // sync side and outer navigations function updateNavs(nextPos) { $('.side-nav, .outer-nav').children().removeClass('is-active'); $('.side-nav').children().eq(nextPos).addClass('is-active'); $('.outer-nav').children().eq(nextPos).addClass('is-active'); } // update main content area function updateContent(curPos, nextPos, lastItem) { $('.main-content').children().removeClass('section--is-active'); $('.main-content').children().eq(nextPos).addClass('section--is-active'); $('.main-content .section').children().removeClass('section--next section--prev'); if (curPos === lastItem && nextPos === 0 || curPos === 0 && nextPos === lastItem) { $('.main-content .section').children().removeClass('section--next section--prev'); } else if (curPos < nextPos) { $('.main-content').children().eq(curPos).children().addClass('section--next'); } else { $('.main-content').children().eq(curPos).children().addClass('section--prev'); } if (nextPos !== 0 && nextPos !== lastItem) { $('.header--cta').addClass('is-active'); } else { $('.header--cta').removeClass('is-active'); } } function workSlider() { $('.slider--prev, .slider--next').click(function() { var $this = $(this), curLeft = $('.slider').find('.slider--item-left'), curLeftPos = $('.slider').children().index(curLeft), curCenter = $('.slider').find('.slider--item-center'), curCenterPos = $('.slider').children().index(curCenter), curRight = $('.slider').find('.slider--item-right'), curRightPos = $('.slider').children().index(curRight), totalWorks = $('.slider').children().length, $left = $('.slider--item-left'), $center = $('.slider--item-center'), $right = $('.slider--item-right'), $item = $('.slider--item'); $('.slider').animate({ opacity : 0 }, 400); setTimeout(function(){ if ($this.hasClass('slider--next')) { if (curLeftPos < totalWorks - 1 && curCenterPos < totalWorks - 1 && curRightPos < totalWorks - 1) { $left.removeClass('slider--item-left').next().addClass('slider--item-left'); $center.removeClass('slider--item-center').next().addClass('slider--item-center'); $right.removeClass('slider--item-right').next().addClass('slider--item-right'); } else { if (curLeftPos === totalWorks - 1) { $item.removeClass('slider--item-left').first().addClass('slider--item-left'); $center.removeClass('slider--item-center').next().addClass('slider--item-center'); $right.removeClass('slider--item-right').next().addClass('slider--item-right'); } else if (curCenterPos === totalWorks - 1) { $left.removeClass('slider--item-left').next().addClass('slider--item-left'); $item.removeClass('slider--item-center').first().addClass('slider--item-center'); $right.removeClass('slider--item-right').next().addClass('slider--item-right'); } else { $left.removeClass('slider--item-left').next().addClass('slider--item-left'); $center.removeClass('slider--item-center').next().addClass('slider--item-center'); $item.removeClass('slider--item-right').first().addClass('slider--item-right'); } } } else { if (curLeftPos !== 0 && curCenterPos !== 0 && curRightPos !== 0) { $left.removeClass('slider--item-left').prev().addClass('slider--item-left'); $center.removeClass('slider--item-center').prev().addClass('slider--item-center'); $right.removeClass('slider--item-right').prev().addClass('slider--item-right'); } else { if (curLeftPos === 0) { $item.removeClass('slider--item-left').last().addClass('slider--item-left'); $center.removeClass('slider--item-center').prev().addClass('slider--item-center'); $right.removeClass('slider--item-right').prev().addClass('slider--item-right'); } else if (curCenterPos === 0) { $left.removeClass('slider--item-left').prev().addClass('slider--item-left'); $item.removeClass('slider--item-center').last().addClass('slider--item-center'); $right.removeClass('slider--item-right').prev().addClass('slider--item-right'); } else { $left.removeClass('slider--item-left').prev().addClass('slider--item-left'); $center.removeClass('slider--item-center').prev().addClass('slider--item-center'); $item.removeClass('slider--item-right').last().addClass('slider--item-right'); } } } }, 400); $('.slider').animate({ opacity : 1 }, 400); }); } function transitionLabels() { $('.work-request--information input').focusout(function(){ var textVal = $(this).val(); if (textVal === "") { $(this).removeClass('has-value'); } else { $(this).addClass('has-value'); } // correct mobile device window position window.scrollTo(0, 0); }); } outerNav(); workSlider(); transitionLabels(); });

How can I disable this code so the background doesn't scroll when an elements display is set to "block" meaning a modal is present?

Sorry for being vague if you need more specifics let me know!

EDIT 1:

• I have tried disabled the div using: $(".l-viewport").attr('disabled','disabled');

  I have set the z-index of the model above all else

Answer 1

you can create a class HideScroll in your css:

.HideScroll {
overflow-y: hidden !important;
overflow-x: hidden !important;
}

The in the code that displays your modal, add this css to your main div:

$('.yourMainDivClass').addClass('HideScroll')

upon modal close, remove the class:

$('.yourMainDivClass').removeClass('HideScroll')

you can also use jquery toggleClass function.

OR

you can wrap your main div inside <fieldset> and set it's disabled attribute to true :

<fieldset id="fs-1">
<div id="yourMainDiv"></div>
</fieldset>

upon showing modal:

$('#fs-1').attr('disabled', true);

upon closing modal:

 $('#fs-1').removeAttr('disabled');