Как добавить текст на прокрутку при использовании offsetTop? - PullRequest
Новая
       24

Как добавить текст на прокрутку при использовании offsetTop?

0 голосов
/ 14 февраля 2020

Это может показаться простым, но я пробовал так много вещей, чтобы заставить это работать! Я пытался реализовать этот плагин https://michalsnik.github.io/aos/, но не работает, когда родительский элемент имеет переполнение: скрытый. Кроме того, я бы предпочел не использовать плагин. Это больше проблема с синтаксисом и с тем, как добавить / исчезнуть в элементах div, когда они входят в область просмотра.

То, что мне нужно выяснить, это правильный код, т. Е. 

$('.parent-div').stop().animate({
   scrollTop: sections[i].offsetTop, opacity: 1 - $('.parent-div').scrollTop - 50
}, 2000);

Опция добавления класса / удаления класса также подойдет. Я пробовал много других подобных вопросов здесь, но не могу найти пример с offsetTop. Действительно был бы признателен за помощь в этом. Заранее спасибо. 

var sections = $('.child');
var i = 0;

function next() {

  if (i < sections.length - 1) {
    i++;

    $('.parent-div').stop().animate({
      scrollTop: sections[i].offsetTop
    }, 2000);

    $('#' + sections[i].id).addClass('fadein_content');
  } else {
    
    $('.child').removeClass('fadein_content');
  }
}

function prev() {

  if (i > 0) {
    i--;
    $('.parent-div').stop().animate({
      scrollTop: sections[i].offsetTop
    }, 2000);

    $('#' + sections[i].id).addClass('fadein_content');
  }
}

$('.parent-div').bind('mousewheel', function(e) {
  if (e.originalEvent.wheelDelta / 120 > 0) {
    
    prev();
  } else {
    
    next();
  }
});
section {
  position: relative;
  height: 900px;
  overflow: hidden;
}

.parent-div {
  height: 500px;
  overscroll-behavior: contain;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  margin-top: 7%;
  width: 100%;
}

.child {
  position: relative;
  height: 100%;
  opacity: 1;
  text-align: center;
  padding: 5%;
}

.fadein_content {
  -webkit-animation: fadein 2s;
  -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}
::-webkit-scrollbar { 
     width: 0px !important; 
     background: transparent;
     height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<section>
  <div class="parent-div">
    <div id="one" class="child">Some content to fade in and out on scroll</div>
    <div id="two" class="child">Some content to fade in and out on scroll</div>
    <div id="three" class="child">Some content to fade in and out on scroll</div>
    <div id="four" class="child">Some content to fade in and out on scroll</div>
    <div id="five" class="child">Some content to fade in and out on scroll</div>
  </div>
</section>
...