Prevent scrolling of the screen when opening modal

Question

I’m creating a single-page site with five sessions, each of which takes the screen size by script. In one of these sessions, it has a button that will open a modal that will be in front of all the content of all the sessions. With the modal open, it is still possible to see the background, and the ideal would be that the background did not scroll, only the content of the modal, and when closing the modal OR reaching the end of the scrolling of the same, the scrolling of the page was activated again.

That is, I need that when I click on the modal button, the scrolling is disabled and when closing the modal or reaching the end of it, the scrolling is activated.

I put an event on the button that makes the content not move, as desired, but when closing the modal I could not cancel the function.

HTML:

  <div id="fullpage">
     <div id="section1" class="section">
        <h1>Sessão 1</h1>
     </div>

     <div id="section2" class="section">
        <h1>Sessão 2</h1>
        <p>Sessão onde o evento acontece</p>
        <button>Botão</button>
     </div>

     <div id="section3" class="section">
        <h1>Sessão 3</h1>
     </div>
  </div>
  <div id="modal">
     <div class="fundo"></div>
     <div class="modal-content">
        <div class="fundo_close"></div>
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>

CSS:

body,html{padding:0;margin:0;}
/* Section styles */
.section{text-align: center;}
.section h1,.section p {color: #333333;margin: 0;}
/* Janela Modal */
#modal{display:none;position:fixed;width:100%;height:100%;top:0;left:0;z-index:101;}
.fundo{background:rgba(0,0,0,.8);width:100%;height:100%;top:0;left:0;position:absolute}
.fundo_close{width:100%;height:100%;top:0;left:0;position:absolute}
.modal-content{width:100%;height:100%;top:0;left:0;position:absolute;}
.item{float:left;position:relative;width:100%;height:50px;margin:15px;background:#fff;z-index:1;}

Jquery:

$(function() {
    // Initialize fullPage
    $('#fullpage').fullpage({
        //Scrolling
        css3: true,
        scrollingSpeed: 1400,
        autoScrolling: false,
        fitToSection: false,
        scrollBar: false,
        easing: 'easeInOutCubic',
        easingcss3: 'ease',
        loopBottom: false,
        loopTop: false,
        loopHorizontal: true,
        continuousVertical: false,
        normalScrollElements: '#element1, .element2',
        scrollOverflow: true,
        touchSensitivity: 15,
        normalScrollElementTouchThreshold: 5,

        //Navigation
        navigation: true,
        navigationTooltips: ['First section', 'Second section', 'Third section'],
        sectionsColor: ['#f1c40f', '#e67e22', '#c0392b'],
        onLeave: function(index, nextIndex, direction) {
            // Remove the inactive class from all arrows
            $('#fp-nav > span').removeClass('inactive');

            // Add inactive class if needed
            if (nextIndex == 1) {
                $('#fp-nav > span.prev').addClass('inactive');
            } else if (nextIndex == $('.fp-section').length) {
                $('#fp-nav > span.next').addClass('inactive');
            }
        }
    });

    // Add previous and next arrows to the fullPage navigation
    $('#fp-nav').prepend('<span class="prev inactive">&#8593;</span>')
            .append('<span class="next">&#8595;</span>');

    // Re-center the fullPage navigation
    $('#fp-nav').css({ 'margin-top': '-' + ($('#fp-nav').height() / 2) + 'px' });

    // Add actions to the arrows
    $('#fp-nav').find('span.prev, span.next').on('click', function() {
        if ($(this).hasClass('prev')) {
            $.fn.fullpage.moveSectionUp();
        } else {
            $.fn.fullpage.moveSectionDown();
        }
    });
});
// Abre Janela Modal
$("button").click(function(){
    $("#modal").show();
    //Pausa a Rolagem do conteúdo atrás da modal
    $("body").stop().on({
        'mousewheel': function(e) {
            e.preventDefault();
            e.stopPropagation();
        }
     })
});
//Fecha Janela Modal
$(".fundo,.fundo_close").click(function(){
    $("#modal").hide();
});

Watch the Jsfiddle with the code.

Answer 1

One solution is to place the overflow of the page to hidden when the modal is opened, and revert when it is closed.

When opening

$("button").click(function(){

    $("#modal").show();
    $("html,body").css({"overflow":"hidden"});
});

At close

$(".fundo,.fundo_close").click(function(){
    $("#modal").hide();
    $("html,body").css({"overflow":"auto"});
});

When you reach the end of the scroll

$('#modal .modal-content').bind('scroll', function() {

    var $conteudo = $(this);

    if ($conteudo.scrollTop() + $conteudo.innerHeight() >= this.scrollHeight) {
        $("#modal").hide();
        $("html, body").css({"overflow":"auto"});
    }
});

Note: To detect the end of the scroll within the modal, it is necessary to declare in the css of the same overflow which works in conjunction with the definition of a height, something you already have in your example:

.modal-content{
    overflow:auto;
} 

See example in this clone of your Jsfiddle.