Vue | 在 Vue 中监听页面滚动事件

页面结构：

    <div id="app" class="box">
      <div class="b1"></div>
      <div class="b2"></div>
      <div class="b3"></div>
      <div class="b4"></div>
      <div class="b5"></div>
    </div>

样式：

    <style media="screen">
      .b1 {height: 2000px; background: red;}
      .b2 {height: 2000px; background: green;}
      .b3 {height: 2000px; background: blue;}
      .b4 {height: 2000px; background: orange;}
      .b5 {height: 2000px; background: purple;}
    </style>

Vue代码：

    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript">
      var app = new Vue({
        el: "#app",
        methods: {
          mounted() {
            window.addEventListener('scroll', this.scrollHandle);  // 绑定页面的滚动事件
          },
          scrollHandle: function(e) {
            var top = e.srcElement.scrollingElement.scrollTop;    // 获取页面滚动高度
            if (top < 2000) {
              console.log("这是第一屏");
            } else if (top >= 2000 && top < 4000) {
              console.log("这是第二屏");
            } else if (top >= 4000 && top < 6000) {
              console.log("这是第三屏");
            } else if (top >= 6000 && top < 8000) {
              console.log("这是第四屏");
            } else if (top >= 8000) {
              console.log("这是第五屏");
            }
          }
        },
      });
    </script>

END 2019-01-25