hide element on scroll within div vuejs3

Question

I'm trying to make an element hide on scroll within a div. I tried this tutorial https://codepen.io/neutraltone/pen/poobdgv, but it works when the complete window is scrolled. I could not make it work on the specific div.

  mounted() {
    this.lastScrollPosition = window.pageYOffset
    window.addEventListener('scroll', this.onScroll)
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.onScroll)
  },

I'm using Vuejs 3. I think the problem is, that I can't specifically point to the div. I tried it with this.$ref.name (using ref="name" on the div), instead of window, but something is not adding up.

Thanks in advance!

Enrico · Accepted Answer · 2021-08-23 17:46:36Z

You could listen for the scroll event on the div using the v-on:scroll listener (or shorthand (@scroll) and then do whatever you want in the handler (in this case checking for scroll position and then hiding the element):

<template>
  <div class="scrollable-container" @scroll="scrollHandler">
    <div class="content">
      <div v-show="isVisible" class="to-hide">Scroll Me</div>
    </div>
  </div>
</template>

<script>

export default {
  data: function() {
return {
    isVisible: true
  };
},
  methods: {
    scrollHandler(e) {
      this.isVisible = e.target.scrollTop > 300 ? false : true
    }
  }
}
</script>

<style>

.scrollable-container {
  height: 500px;
  width: 300px;
  margin: 200px auto;
  overflow-y: scroll;
  border: 1px solid black;
}

.content {
  height: 1000px;
}

.to-hide {
  min-height: 500px;
  background-color: blue;
}

</style>

Collectives™ on Stack Overflow

hide element on scroll within div vuejs3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related