How made a scroll modal on Vue?

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 .

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

    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.


import Modal from './Modal.vue';
export default {
  components: {
  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() {
  watch: {
    scrollHeight() {
      if (this.scrollHeight === 450) this.showModal = true;

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