Снимок прокрутки ломается jQuery исчезать - PullRequest
Новая
       59

Снимок прокрутки ломается jQuery исчезать

2 голосов
/ 29 января 2020

У меня проблема с двумя отдельными функциями, которые я пытаюсь использовать. Во-первых, я использую некоторые jQuery, чтобы контент исчезал при входе в окно браузера, а во-вторых, я использую мгновенную прокрутку в CSS.

У меня работают обе эти функции самостоятельно, однако, когда я пытаюсь запустить оба вместе, кажется, что момент прокрутки разрушает затухание. Я думаю, что это как-то связано с переполнением, но я уже немного не в себе с jQuery вот, так не знаете, как (если?) обойти эту проблему ??

Вот мой текущий код ... 

$(window).on("load",function() {
  $(window).scroll(function() {
    var windowBottom = $(this).scrollTop() + $(this).innerHeight();
    $(".fade").each(function() {
      /* Check the location of each desired element */
      var objectBottom = $(this).offset().top + $(this).outerHeight();
      
      /* If the element is completely within bounds of the window, fade it in */
      if (objectBottom < windowBottom) { //object comes into view (scrolling down)
        if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
      } else { //object goes out of view (scrolling up)
        if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
      }
    });
  }).scroll(); //invoke scroll-handler on page-load
});
body {
  margin: 0;
}

.snap-scroll-wrapper {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
}

.snap {
  width: 100%;
  height: 100%;
  scroll-snap-stop: normal;
  scroll-snap-align: start;
  position: relative;
  color: white;
  transition: 300ms all ease-in-out;
}

.snap:nth-child(1) {background: lightpink;}.snap:nth-child(2) {background:lightgreen;}.snap:nth-child(3) {background: lightblue;}.snap:nth-child(4) {background: lightyellow;}

.fade {
	opacity: 1;
  transition: 300ms all ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="snap-scroll-wrapper">
  <div class="snap">
    <code class="fade">Some text here</code>
  </div>
  <div class="snap">
    <code class="fade">Some text here</code>
  </div>
  <div class="snap">
    <code class="fade">Some text here</code>
  </div>
  <div class="snap">
    <code class="fade">Some text here</code>
  </div>
</div>

Я искал других людей с такой же проблемой, как в Stackoverflow, так и в других местах, но не могу найти никого с точным (или даже довольно близко) проблема, поэтому решил опубликовать свой собственный вопрос.

Любое понимание, которое может предложить любой, будет высоко ценится!

1 Ответ

1 голос
/ 03 февраля 2020

Не используйте для этого прослушиватель событий прокрутки, попробуйте использовать Intersection Observer API. Он поддерживается в каждом браузере и предназначен для решения таких проблем: когда элемент перекрывается с другим элементом, с окном просмотра, и тому подобное.

На на этом сайте есть хороший пример о том, как выцветать элементы, когда они попадают в область просмотра (прокрутите вниз, чтобы увидеть его в действии)

Для использования IO вы сначала нужно установить для него параметры, затем определить, какой элемент (элементы) следует отслеживать, и, наконец, определить, что именно происходит при срабатывании ввода-вывода.

Вот краткий пример, с которого можно начать: 

const SELECTOR = '.watched';
const ANIMATE_CLASS_NAME = 'animated';

const animate = element => (
  element.classList.add(ANIMATE_CLASS_NAME)
);

const isAnimated = element => (
  element.classList.contains(ANIMATE_CLASS_NAME)
);

const intersectionObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    
    // when element's is in viewport,
    // animate it!
    if (entry.intersectionRatio > 0) {
      animate(entry.target);
      // remove observer after animation
      observer.unobserve(entry.target);
    }
  });
});

// get only these elements,
// which are not animated yet
const elements = [].filter.call(
  document.querySelectorAll(SELECTOR),
  element => !isAnimated(element, ANIMATE_CLASS_NAME)
);
//console.log(elements);

// start observing your elements
elements.forEach((element) => intersectionObserver.observe(element));
.h100 {
height: 100vh;
}

.watched {
 opacity: 0;
 transition: opacity .5s;
}

.watched.animated {
opacity: 1;
}
<div class="h100">
scroll down
</div>
<div class="watched">
I'm watched
</div>
<div class="h100">
Another element, keep scrolling
</div>
<div class="watched">
I'm also watched
</div>
...