Одно событие уничтожает другое - PullRequest
Новая
       9

Одно событие уничтожает другое

0 голосов
/ 11 апреля 2020

Я на самом деле дизайнер, и у меня есть постоянная проблема с событиями, и я просто не могу понять это правильно. Теперь проблема. У меня есть две библиотеки, для прокрутки и для эффекта параллакса. Обе библиотеки не хотят работать друг с другом, поэтому эффект параллакса не возникает. При изменении размера он снова работает в течение нескольких секунд.

Может быть, кто-то может помочь мне с моей проблемой. В любом случае я был бы благодарен. Вот мой код: 

<!DOCTYPE html>
    <html lang="de" >
    <head>
      <meta charset="UTF-8">
      <title></title>
      <style>
        *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html, body {
      min-height: 100%;
      font-size: 16px;
      font-size: 1rem;
      background: #92D8F1;
    }

    section {
      position: relative;
      height: 100vh;
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      overflow:hidden;
    }
    [scroller='true'] #scrollbar-wrapper {
      height: 100vh;
      width: 100vw;
    }
      </style>
    </head>
    <body>
    <div class="page-wrapper">
      <div id="scrollbar-wrapper">
        <section><img class="thumbnail" src="https://picsum.photos/id/209/1920/1280" alt="image"></section>
        <section><img class="thumbnail" src="https://picsum.photos/id/1019/1920/1280" alt="image"></section>
        <section><img class="thumbnail" src="https://picsum.photos/id/1026/1920/1280" alt="image"></section>
        <section><img class="thumbnail" src="https://picsum.photos/id/111/1920/1280" alt="image"></section>
        <section><img class="thumbnail" src="https://picsum.photos/id/149/1920/1280" alt="image"></section>
        <section><img class="thumbnail" src="https://picsum.photos/id/177/1920/1280" alt="image"></section>
        <section><img class="thumbnail" src="https://picsum.photos/id/184/1920/1280" alt="image"></section>
        <section><img class="thumbnail" src="https://picsum.photos/id/209/1920/1280" alt="image"></section>
    </div>
    </div>
      <script src='https://cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/8.5.2/smooth-scrollbar.js'></script>
     <script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.2.0/dist/simpleParallax.min.js"></script>
      <script src="script.js"></script>
    </body>
    </html>

    /* S r o l l b a r */
var element = document.querySelector("#scrollbar-wrapper");
var options = {
  // damping: 0.25,
  damping: 0.05,
  thumbMinSize: 5,
  renderByPixel: true,
  alwaysShowTracks: false,
  continuousScrolling: true
};
/* Scrolling*/
document.addEventListener("DOMContentLoaded", function () {
  setTimeout(function () {
    const scrollbar = Scrollbar.init(element, options);
    document.querySelector("body").setAttribute("scroller", true);
    scrollbar.update();
  }, 4000);
  //event.stopPropagation();

});
/* Parallax*/
document.addEventListener("DOMContentLoaded", function () {
  setTimeout(function () {
    var image = document.getElementsByClassName('thumbnail');
    new simpleParallax(image, {
      scale: 2.5,
      delay: 6,
      transition: 'cubic-bezier(0,0,0,1)'
    });
  }, 0);
  //event.stopImmediatePropagation()
});
...