vue.js - How to hide a div when scrolled to bottom?

Question

How do I hide a div when scrolled to the bottom of a page?

    <div id="cookieID">
  <p class="cookie-policy">{{ cookiePolicy }}</p>
</div>

question from:https://stackoverflow.com/questions/65897823/how-to-hide-a-div-when-scrolled-to-bottom

Answer 1

Try this:

<template>
  <div>
    <p v-if="!scrolledToBottom" class="cookie-policy">{{ cookiePolicy }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    scrolledToBottom: false,
  }),
  mounted() {
    this.scroll()
  },
  methods: {
    scroll() {
      window.onscroll = () => {
        const bottomOfWindow =
          Math.max(
            window.pageYOffset,
            document.documentElement.scrollTop,
            document.body.scrollTop
          ) +
            window.innerHeight ===
          document.documentElement.offsetHeight

        if (bottomOfWindow) {
          this.scrolledToBottom = true
        }
      }
    },
  },
}
</script>

Instead of v-if you may prefer using v-show depending of your usecase.

Source: Check if a user has scrolled to the bottom in Vue.js