vtimofeev / vue-check-view Goto Github PK

Version:

"vue-check-view": "^0.3.0"

Steps to reproduce:

1. Render the code below in your component:

<template>
  <div v-view.once="onceHandler" class="wrapper">
    <div v-if="data" class="content">
    </div>
  </div>
</template>

<script>
  export default {
    name: 'test-component',
    data() {
      return {
        data: undefined,
      }
    },
    methods: {
      onceHandler() {
        console.log('onceHandler')
      },
    },
  }
</script>

❌ Actual result:
vue-check-view does not trigger: classes in the dom are not updated and onceHandler is not called.

✅ Expected result:
vue-check-view is triggering.

if I try this workaround:

<style lang="scss">
  .wrapper {
      min-height: 1px;
  }
</style>

it starts working. But IMO it should work without this workaround even when the target div height is 0.

Hi, thanks for the great script, I was trying to use it to start animations like translateX, but could please help me out, what is the best way to animate and keep it active until is out of the viewport, I tried the .view-in but it turns to view-out sometimes

https://codepen.io/nam_co/pen/gOpRwbP

Appreciate the help

This module gives problems with IE11 due to its use of ES6 features. It should be made retro-compatible with older ES versions.

I success declare the js plugin with *.d.ts, but after I do .use(checkView), my view is blank, did this library support on Typescript?

main.ts file

import checkView from 'vue-check-view'
....
createApp(App).use(store).use(router).use(checkView).component('font-awesome-icon', FontAwesomeIcon).mount('#app')

*.d.ts file

declare module "vue-check-view"; any;

Is it possible to set the scroll event on an overflowing div instead of the page/document?

Hi.. is it possible to add the functionality to pass extra params into viewHandler alongside with the event?
eg v-view="viewHandler($event,message)"

It will be nice if we have an option to disable the append of classes to the element.

Would be Great if it can detect also horizontal scroll 😅

...just wanted to thank you, @vtimofeev. This works really nicely and smoothly.

i have a component like this

<div class="background-footer" style="z-index: 1" v-view="handleScroll">
 <!-- content -->
</div>

and my script function only do console.log().

Why is it only trigger once instead of every time i scroll down the screen ?
Not like how it works in demo, every time i scroll down, the component updating its view property

So I have an element target which is bigger than viewport size,
and
viewHandler(e) fires exit from element before it actually leaves the viewport
here is the printscreen of console.log

I think this is because element is bigger and then something trippy happens to percent in view

Its not a big issue but I think its worth fixing and making this plugin SUPERAWESOME!
Anyway thanks for even making this, it really saved me the time

It would be great if it were possible to check e.percentInView on page load – I need to apply a class if e.percentInView > 0.98 on page load as the view-in--full is not always accurate initially.