在 Vue 中滚动 100px 后显示 div 标签

Question

我正在工作 filename.vue 文件。 我正在尝试添加一个 div 以在滚动 100px 后显示。 我无法得到它。 请帮我找出我哪里出错了。

<template>
 <div id="sectionTop"> 
  <div id="scrollButton"> 
   <a class="topButton" href="javascript:document.getElementById('sectionTop').scrollIntoView(true);"><img src="../../images/uparrow.svg"></a>
  </div>
 </div>
</template>

<script>
 $(document).scroll(function() {
    var y = $(this).scrollTop();
    if (y > 800) {
      $('.scrollButton').fadeIn();
    } else {
      $('.scrollButton').fadeOut();
    }
  });
</script>

根据建议更新

<template>
 <div id="sectionTop"> 
  <div id="scrollButton"> 
   <a class="topButton" href="javascript:document.getElementById('sectionTop').scrollIntoView(true);" v-if="scrollpx > 800"><img src="../../images/uparrow.svg"></a>
  </div>
 </div>
</template>

<script>
  export default {    
    data() {
      return {
        scrollpx: 0
      };
    },
    methods: {
      handleScroll() {
        this.scrollpx = window.scrollY;
      }
    },
    created() {
      window.addEventListener('scroll', this.handleScroll);
    },
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll);
    }
  };
</script>

Answer 1

您不需要 jquery 来执行此操作。 您可以在 vue 组件的created方法中为滚动事件注册一个事件侦听器（之后不要忘记取消注册！）。 在handleScroll方法中，您可以更新保存当前 scrollY 值的变量。 现在这个值可用于 vue 并且可以“被动地”使用。 例如，您可以使用v-if显示您的按钮：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="replace"></div> <script> new Vue({ el: '#replace', template: ` <div id="scroller"> <div id="sectionTop" style="height: 5000px"> Please Scroll down <div id="scrollButton"> <a class="topButton" style="position:fixed" v-if="scrollpx > 800">Scroll top</a> </div> </div> </div>`, data() { return { scrollpx: 0 }; }, methods: { handleScroll() { this.scrollpx = window.scrollY; } }, created() { window.addEventListener('scroll', this.handleScroll); }, destroyed() { window.removeEventListener('scroll', this.handleScroll); } }) </script>

Answer 2

这就是我解决这个问题的方法。

<a class="scrollTop" href="javascript:document.getElementById('sectionTop').scrollIntoView(true);" title='Click here to go to the top' v-if="scrollpx > 100"><img src="../../images/uparrow.svg"></a>

<script>
  export default {    
    data() {
      return {
        scrollpx: 0
      };
    },
    methods: {
      handleScroll() {
        this.scrollpx = document.body.scrollTop;
      }
    },
    mounted() {
      document.body.addEventListener('scroll', this.handleScroll);
    } 
  };

</script>