How made a scroll modal on Vue?

Get Help
,
#1

Im trying to find a way to display a modal on Vuejs, when i scrolling down ( > 450 px) a page, the problem is i got nothing on my screen when i compile the code .

<template>
  <h2 id="modal">Modal Example</h2> 
  <div id="app">
  	<Modal v-if="showModal" @closeModal="showModal = false" />
  </div> 
   <p>



    Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
    cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
    nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
    eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


  </p>

</template>
 
<script>
import Modal from './Modal.vue';
export default {
  components: {
    Modal,
  },
  data: () => ({
    showModal: false,
    scrollHeight: 0,
    interval: null,
  }),
  methods: {
    handleScroll() {
      this.handleDebouncedScroll = window.scrollY > 0;
    },
  },
  mounted() {
    this.interval = setInterval(() => {
      this.scrollHeight = document.body.scrollHeight;
    }, 100);
  },
  unmounted() {
    clearInterval(this.interval);
  },
  watch: {
    scrollHeight() {
      if (this.scrollHeight === 450) this.showModal = true;
    },
  },
};
</script>
#2

Without really checking the rest of the code: I think you problem is here:

Initially scrollHeight is 0. Then the user scrolls down and you periodically update scrollHeight. Eventually the user scrolls down past the 450 mark — let’s say to 453 — and your check fails again as 453 !== 450. Try with if (this.scrollHeight >= 450) (and maybe add an else branch to set showModal back to false if the user scrolls up).

1 Like