dgknca / vue-scroll-check

Detects if an element has scrolled to bottom, top or middle in itself.

vue-scroll-check

A simple component based on Vue.js. Detects if an element has scrolled to bottom, top or middle in itself.

Demo

Live Demo | Codesandbox

Install

npm i vue-scroll-check

Props

Props	Description	Type	Default
scrollAreaClass	Classes of the component's scrollable child element.	String
:threshold	Threshold value of event change.	Number	0

Events

Events
onBottomReach
onBottomLeave
onTopReach
onTopLeave
onMiddleEnter
onMiddleLeave

Usage

<v-scroll-check
  scrollAreaClass="list"
  :threshold="100"
  @onBottomReach="onBottomReach"
  @onBottomLeave="onBottomLeave"
  @onTopReach="onTopReach"
  @onTopLeave="onTopLeave"
  @onMiddleEnter="onMiddleEnter"
  @onMiddleLeave="onMiddleLeave"
>
  <!-- Send your contents as slot -->
  <div class="item" v-for="i in 50" :key="i">Item {{ i }}</div>
</v-scroll-check>

<script>
  import VScrollCheck from 'vue-scroll-check'

  export default {
    components: {
      VScrollCheck
    },
    methods: {
      onBottomReach() {
        console.log('onBottomReach')
      },
      onBottomLeave() {
        console.log('onBottomLeave')
      },
      onTopReach() {
        console.log('onTopReach')
      },
      onTopLeave() {
        console.log('onTopLeave')
      },
      onMiddleEnter() {
        console.log('onMiddleEnter')
      },
      onMiddleLeave() {
        console.log('onMiddleLeave')
      }
    }
  }
</script>

<style>
  /* Don't forget that! The scrollAreaClass must be scrollable. */
  .list {
    height: 500px;
    overflow: auto;
  }
</style>

vue-scroll-check's Issues

No need containerClass

You can directly override a component's class already in Vue.

So this line is removable:

vue-scroll-check/src/components/ScrollCheck.vue

Line 4 in 67fa536

containerClass,

This dependency was not found

When importing this package i get an error that the dependency was not found:

Things I tried:

• installing the npm package
• deleting node modules and installing all the packages
• trying to get the package with require("vue-scroll-check/src/components/ScrollCheck.vue").default
• trying to get the package with require("vue-scroll-check/src/components/ScrollCheck.vue")
  

Thanks for the help