如何暂时禁用“滚动”时,一个部分是更高的屏幕高度

我正在尝试使用我的网站scrollify。它现在有三页(部分)。第二页(部分)比屏幕高,所以我想禁用scrollify直到它到达第二页的底部。但在我的代码中,当页面稍微滚动一点时,它会在到达第二页底部之前进入第三页。我怎样才能解决这个问题?我把我的部分代码放在这里

HTML格式

    <div class="main">
      <section class="section js-section" data-section-name="section1">
        <div class="section-content">
          <p>XXX</p>
        </div>
      </section>

      <section class="section js-section" data-section-name="section2">
        <div class="section-content">
          <div class="portfoliocontainer">
            <img src="a.JPG" alt="a">
            <img src="b.png" alt="b">
            <img src="c.jpg" alt="c">
            <img src="d.jpg" alt="d">
            <img src="e.jpg" alt="e">
            <img src="f.jpg" alt="f">
          </div>
        </div>
      </section>

      <section class="section js-section" data-section-name="section3">
        <div class="section-content">
          <h2>section 3</h2>
          <p>ZZZ</p>
        </div>
      </section>
      <ul class="pager" id="js-pager"></ul>
    </div>

CSS格式

.main {
  position: relative;
}
.section {
  width: 100%;
  max-height: 105%;
}
.section-content {
  max-width: 80%;
  margin: 0 auto;
  padding: 40px 60px;
  text-align: center;
}
.portfoliocontainer {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   flex-direction: row;
   max-height: 100vh;
   margin-top: 5%;
 }

var $section = $('.js-section');
var $pager = $('#js-pager');

var option = {
  section : '.js-section',
  sectionName:false,
  easing: "swing",
  scrollSpeed: 600,
  scrollbars: true,
  overflowscroll: true,
  interstitialSection: ".header",
  before:function(index) {
    pagerCurrent(index);
  },
  afterRender:function() {
    createPager();
  }
};

$(document).ready(function(){
  $(".downarrow").click(function(){
    $.scrollify.next();
  });

  $(".uparrow").click(function(){
    $.scrollify.move();
  });
});

$(function() {
  $.scrollify(option);
});