1

我正在尝试为我的网站使用 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%;
 }

JS

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);
});
4

1 回答 1

1

你将不得不定义 afterRender 和 beforeRender 函数它给控制台一个错误：

createPager(); pagerCurrent();

没有定义。

https://codepen.io/neel555nc/pen/mzmgeG

于 2018-10-11T08:25:17.433 回答