Question

我实际上是一名设计师，我在活动方面一直遇到问题，但我做对了。现在的问题。我有两个库，用于滚动和视差效果。这两个库都不想互相配合，因此不会出现视差效果。调整大小后，它将再次运行几秒钟。

也许有人可以帮助我解决我的问题。无论如何，我将不胜感激。这是我的代码：

<!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()
});

一个事件摧毁了另一个事件

0 个答案: