1

I am trying to use scrollify for my website. It now has three pages(sections). The second page(section) is taller than the screen height, so that I want to disable “scrollify” until it reaches the bottom of the second page. But on my codes, when the page is scrolled even a little, it goes to the third page before reaching the bottom of the second page. How can I fix this problem? I put part of my code here

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);
});
Tak
  • 167
  • 1
  • 5
  • 18
  • https://stackoverflow.com/questions/28123925/scrollify-section-scroll-with-overflow I found a similar question, but it seems like this problem has not been solved... – Tak Oct 11 '18 at 05:40

1 Answers1

1

you will have to define afterRender and beforeRender function it was giving console an error: 

createPager(); pagerCurrent();

were not defined.

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

confusedGuy
  • 71
  • 7