Question

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

Answer 1

您将必须定义afterRender和beforeRender函数，使控制台出现错误：

createPager(); pagerCurrent();

未定义。

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

当一个部分的屏幕高度更高时，如何临时禁用“滚动”

1 个答案: