chrishurlburt / vue-scrollview Goto Github PK

Does this component support playing a video when scrolled to and then pausing when out of view?

Love the library!

I think a very good feature to have would be a delay prop as well. Often when we want to animate items in viewport we add delays for items. Easy feature to implement too, and would be a great addition to the library.

@chrishurlburt The link to the documentation does not work; could you please fix that? Thanks!!

Hi there,

Great tool, thanks for building!

Do you have a recommended method for modifying the existing scrollToComponent function to implement a smooth scrolling animation?

As a newbie, I'll inevitably use a duct-tape approach, and I wanted to see if there was a more elegant solution first.

Thanks!

Is it possible to use this with SSR with Nuxt.js?

When I check the source code, I see the literal tag in the source:

<Scroll-View offset="100" tag="div" data-v-b22faea4 data-v-64ea40b6></Scroll-View>

In Chrome (MacOS) the JS works fine with this, but in IE11 Windows, it takes issue with this.

Unless I'm doing something wrong, it doesn't look like component keys can be set dynamically via prop vars?

Here's what I'm trying:

<scroll-view>
  <template slot-scope="visibility">
    <headlines
      :key="scrollKey"
      :title="title"
      :heading="heading"
      :subhead="subhead"
      :visible="visibility.scrollKey"
    ></headlines>
  </template>
</scroll-view>

Where scrollKey is a prop on the parent component. It works fine if I hard-code a key, but I have these appearing multiple times on a page, and they're always nested, so I can't hard-code a key each time.

Just wondering if there is a way to stop watching a component if it's already been in view once?

I have a setup that adds a class to an element if it's in view, but then it also triggers the removal of this class once it goes out of view again. Ideally I'd like to keep the class attached.

Typical setup is as shown in the docs:

<Scroll-View tag="div">
  <template scope="inView">
    <app-heading :visible="inView.heading1" key="heading1">Example</app-heading>
  </template>
</Scroll-View>

Thanks!

In an Infinite Scroll implementation, after N items are loaded/rendered successfully the $scrollview.state.lastComponent correctly points to the N item.

After that, we are updating all items (asynchronously over AJAX) and re-fetch an initial batch of 10 items (10 < N).

Although using $scrollview.refresh(); on Vue.nextTick the $scrollview.state.lastComponent still is pointing to the previous list's last available item (the N item).

The issue can be overcome by re-setting the lastComponent to an empty object, right after fetching the items, but that solution is not elegant..

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

It is much more efficient and its polyfill is very simple for browsers which do not support it that its code is already in this library

Hello, do you have any plans to support Vue3?

Hey there,

I need help fixing my problem while using v-for inside the .

<Scroll-view>
   <template scope="inView">
      <coin v-for="(coin, key) in list" :visible="inView.key" :shortname="coin" key="key"></coin>
   </template>
</Scroll-view>

The parent Vue looks like this.

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import * as io from "socket.io-client";
import ScrollView from 'vue-scrollview';

Vue.use(VueAxios, axios);
Vue.use(ScrollView);

let home = new Vue({
    el: '#home-list',
    data: function () {
        return {
            coins: [],
            list: []
        };
    },

...

and the coin Component looks like this:

 import Vue from 'vue';

    export default {
        props: {
            shortname: {
                required: true
            },
            visible: {
                default: () => false
            }
        },

        watch: {
            visible: function (val) {
                console.log(val);
            }
        },

        mounted() {
            console.log(this.visible, this.shortname);
        },

        computed: {},

        methods: {}
    }

The result is, there is not result, it is not working. Maybe you could me some advice :)