Question

我今天在使用CodePen爬行时，发现了一支有趣的笔=> codepen

// Replicate from https://benmingo.com
// next step : try using vue-motion

new Vue({
  el: "#app",
  data() {
    return {
      positionY: 0,
      ratio: 1,
      pageHeight: null,
      elements: []
    };
  },

  computed: {
    computedPosition() {
      return {
        transform: `translate3D(0, -${this.positionY}px, 0)`
      };
    },

    getPageHeight() {
      return {
        height: `${this.pageHeight}px`
      };
    }
  },

  mounted() {
    var content = document.querySelector(".txt");
    var rect = content.getBoundingClientRect();
    this.pageHeight = rect.height - window.innerHeight;

    this.support = this.getSupport();
    if (this.support.isFirefox) {
      this.ratio = 15;
    }

    this.elements = document.querySelectorAll("p");

    document.onwheel = e => {
      this.positionY = this.clamp(
        this.positionY + e.deltaY * this.ratio,
        0,
        this.pageHeight
      );
      this.animateElements();
    };
  },

  methods: {
    getSupport() {
      return {
        isFirefox: navigator.userAgent.indexOf("Firefox") > -1
      };
    },
    clamp(value, min, max) {
      return Math.min(Math.max(min, value), max);
    },
    animateElements() {
      this.elements.forEach((el, i) => {
        TweenMax.to(el, 0.7, {
          y: -this.positionY,
          opacity: 1,
          delay: i * 0.02,
          ease: Expo.easeOut
        });
      });
    }
  }
});

#app {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  background-color: #141414;
  color: white;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.content {
  position: relative;
  pointer-events: none;
}

p {
  padding-bottom: 2rem;
}

.txt {
  position: relative;
  padding: 50px;
  padding: 41.14286vh 0 28.57143vh 51.25vw;
  width: 36.08333vw;
  font-size: 1.66667vw;
  line-height: 2.16667vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<body :style="getPageHeight">
  <div id="app">
  <div class="content">
    <div class="txt"> 
      <p v-for="item in 8" :key="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque fuga corporis laboriosam voluptatum cupiditate blanditiis maiores voluptatem quo inventore, nemo culpa! Eum illum tenetur sequi, nostrum sed quia eius iste?</p>
    </div>
  </div>
</div>
</body>

问题在于它是用vue构建的，而且...我对此一无所知！我一直在尝试将其转换为普通javascript数小时，但未成功。有人可以帮我吗？

我唯一能做的就是提取两个函数。这是我的JS代码：

// Replicate from https://benmingo.com
// next step : try using vue-motion

var app = document.getElementById("#app");
var content = document.querySelector(".txt");
var rect = content.getBoundingClientRect();

const computedPosition = () => {
  return {
    transform: `translate3D(0, -${this.positionY}px, 0)`
  };
};

const getPageHeight = () => {
  return {
    height: `${this.pageHeight}px`
  };
};

new Vue({
  el: "#app",
  data() {
    return {
      positionY: 0,
      ratio: 1,
      pageHeight: null,
      elements: []
    };
  },

  mounted() {
    this.pageHeight = rect.height - window.innerHeight;
    this.support = this.getSupport();
    if (this.support.isFirefox) {
      this.ratio = 15;
    }

    this.elements = document.querySelectorAll("p");

    document.onwheel = e => {
      this.positionY = this.clamp(
        this.positionY + e.deltaY * this.ratio,
        0,
        this.pageHeight
      );
      this.animateElements();
    };
  },

  methods: {
    getSupport() {
      return {
        isFirefox: navigator.userAgent.indexOf("Firefox") > -1
      };
    },
    clamp(value, min, max) {
      return Math.min(Math.max(min, value), max);
    },
    animateElements() {
      this.elements.forEach((el, i) => {
        TweenMax.to(el, 0.7, {
          y: -this.positionY,
          opacity: 1,
          delay: i * 0.02,
          ease: Expo.easeOut
        });
      });
    }
  }
});

这是HTML代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Delayed Momentum Scroll</title>



  <link rel="stylesheet" href="css/style.css">


</head>

<body>

  <body :style="getPageHeight">
    <div id="app">
      <div class="content">
        <div class="txt">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque fuga corporis
            laboriosam voluptatum cupiditate blanditiis maiores voluptatem quo inventore, nemo culpa! Eum illum tenetur
            sequi, nostrum sed quia eius iste?</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque fuga
            corporis
            laboriosam voluptatum cupiditate blanditiis maiores voluptatem quo inventore, nemo culpa! Eum illum
            tenetur
            sequi, nostrum sed quia eius iste?</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque fuga corporis
            laboriosam voluptatum cupiditate blanditiis maiores voluptatem quo inventore, nemo culpa! Eum illum tenetur
            sequi, nostrum sed quia eius iste?</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque fuga
            corporis
            laboriosam voluptatum cupiditate blanditiis maiores voluptatem quo inventore, nemo culpa! Eum illum
            tenetur
            sequi, nostrum sed quia eius iste?</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque fuga corporis
            laboriosam voluptatum cupiditate blanditiis maiores voluptatem quo inventore, nemo culpa! Eum illum
            tenetur
            sequi, nostrum sed quia eius iste?</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque fuga
            corporis
            laboriosam voluptatum cupiditate blanditiis maiores voluptatem quo inventore, nemo culpa! Eum illum
            tenetur
            sequi, nostrum sed quia eius iste?</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque fuga corporis
            laboriosam voluptatum cupiditate blanditiis maiores voluptatem quo inventore, nemo culpa! Eum illum
            tenetur
            sequi, nostrum sed quia eius iste?</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque fuga
            corporis
            laboriosam voluptatum cupiditate blanditiis maiores voluptatem quo inventore, nemo culpa! Eum illum
            tenetur
            sequi, nostrum sed quia eius iste?</p>
        </div>
      </div>
    </div>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js'></script>



  <script src="js/index.js"></script>




</body>

</html>

有人可以帮我解释一下我在哪里错了吗？

动量滚动（从Vue到Vanilla JS）

0 个答案: