Как временно отключить «прокрутку», когда раздел выше высоты экрана - PullRequest
Новая
       35

Как временно отключить «прокрутку», когда раздел выше высоты экрана

0 голосов
/ 11 октября 2018

Я пытаюсь использовать 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);
});

1 Ответ

0 голосов
/ 11 октября 2018

вам нужно будет определить afterRender и функцию beforeRender, которая выдает консоль ошибку: 

createPager(); pagerCurrent();

не определены.

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

...