A Vue.js component for detecting when components are visible in the viewport via the Vue.js scoped slots api.

Overview

vue-scrollview

npm vue2

ScrollView Logo

ScrollView is a Vue.js plugin that includes a set of components and methods for facilitating UI interactions tied to scrolling in your app. For example, ScrollView may be used to create infinitely scrolling content, trigger lazy load resources, animate components based on visibility with a third-party library like GreenSock, or easily create UI elements such as scrollspy navigations.

For more information & examples, Read the documentation located here.

Comments
  • Possible bug in IE11 and Nuxt.js

    Possible bug in IE11 and Nuxt.js

    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.

    opened by michaelpumo 4
  • Using v-for inside Scroll-view

    Using v-for inside Scroll-view

    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 :)

    opened by mapodev 4
  • More info on the scrollToComponent function

    More info on the scrollToComponent function

    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!

    opened by lindseybradford 1
  • [Feature Request] Add delay prop

    [Feature Request] Add delay prop

    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.

    opened by ghost 1
  • Why does not work?

    Why does not work?

    <Scroll-View tag="div">
      <template scope="inView">
                          <PostsBox
                                    v-for="(item , index) in this.arrayPost"
                                    :key="item.id"
                                    :id="item.id"
                                    :index="index"
                                    :visible="inView.item.id"
                            ></PostsBox>
      </template>
    </Scroll-View>
    
    opened by cherneckiy 1
  • Is there any way to perform the inView scope only once?

    Is there any way to perform the inView scope only once?

    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!

    opened by michaelpumo 1
  • Dynamic Keys?

    Dynamic Keys?

    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.

    opened by AtlantaJones 0
  • `$scrollview.state.lastComponent` is not updated properly

    `$scrollview.state.lastComponent` is not updated properly

    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..

    opened by asgouros 0
  • Added comments to show $scrollview usage in applications

    Added comments to show $scrollview usage in applications

    I was working on an infinite scroll list component today and I could not figure out where to import the $scrollview variable from to use in my view component.

    After reading the documentation, I found the way, but I implement many things by tweaking the code from provided examples (which are meant to be working out of the box) and I think it would be cool to include a hint in them as well on how to use the plugin in a real application, just to prevent people from having to search through the documentation.

    I couldn't decide whether I should've added more context to my comments, so if that is an issue, I can make some further tweaks.

    I think this kind of hint would help me but I do not know what is your opinion on the whole thing, so I am leaving it up to you to decide whether this addition is useful or not.

    opened by jstavanja 0
  • Implement visibility listening through Intersection Observer API

    Implement visibility listening through Intersection Observer API

    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

    opened by string-areeb 2
Owner
Chris Hurlburt
Chris Hurlburt
A plugin that checks if element is in viewport

Check if element is in viewport. Vue.js 2 plugin with SSR support without dependencies. DEMO Simple plugin that checks element position on the screen

Vasily Timofeev 115 Sep 14, 2022
A vue boiler plate with state management, vuex, vue-router that can be backed by a laravel restful api using jwt auth

Laravel 6 (LTS) Vue.js Frontend Boilerplate A Vue.js Frontend starter project kit template/boilerplate with Laravel 6 Backend API support. Features Re

MUWONGE HASSAN 2 Oct 12, 2021
A vue 2.0 directive to keep scroll position for keep-alived components.

vue-keep-scroll-position A vue 2.0 directive to keep scroll position for keep-alived components. Forked from vue-keep-scroll and rewritten for vue 2.0

Beep LIN 38 Feb 18, 2022
🍹 Next-gen compact native smooth scrolling components for Vue 3

?? Next-gen compact native smooth scrolling component library for Vue 3 ⚡ No scrollbar reinventing using DOM elements, no weird logic, only native scr

ZEOKKU 11 Oct 1, 2022
A Vue component to add intersection-observer to a Vue component or HTML element.

Vue Intersect A Vue component to add intersection-observer to a Vue component or HTML element. Table of content Introduction Demo Installation Usage P

WEAREHEAVY® 322 Aug 26, 2022
The Simplest Scroll Area Component with custom scrollbar for Vue Js. https://bosnaufal.github.io/vue-scrollbar/

Vue Scrollbar The Simplest Scroll Area Component with custom scrollbar for Vue Js. All animation, Height and Width are pure CSS, So it's TOTALLY CUSTO

Naufal Rabbani 117 Feb 23, 2022
Vue-loadmore - A pull-down refresh and pull-up loadmore scroll component for Vue.js

vuejs-loadmore A pull-down refresh and pull-up loadmore scroll component for Vue

staticdeng 53 Sep 21, 2022
Vue-slidePage is a fullscreen scrolling component of Vue.js, Based on slidePage

vue-slidePage Introduction vue-slidePage is a fullscreen scrolling component of Vue.js, Based on slidePage Demo simple custom Usage Install $ npm i -S

null 16 Nov 12, 2021
A Vue.js 2.0 directive for vue component. Load more data when scroller arrived end.

A Vue.js 2.0 directive for vue component. Load more data when scroller arrived end.

Huabin Wang 6 Aug 17, 2020
A Vue component that syncronize containers scroll positions

vue-scroll-sync A Vue component that syncronize containers scroll positions Installation npm i --save vue-scroll-sync Browser Include the script file,

null 26 Jul 15, 2022
A Back-to-top component for Vue.js, which scroll page to the top when clicked

Vue Backtotop Component A Back-to-top component for Vue.js, which scroll page to the top when clicked Demo See demo. Install via npm npm install vue-b

Caio Fernandes 184 Aug 4, 2022
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 531 Sep 27, 2022
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.

navscroll-js Installation This package is available on npm. Using npm: npm install --save navscroll Using yarn: yarn add navscroll Directly include it

Honoré Nintunze 57 Mar 2, 2022
A Vue.js component to top of the page

vue-scroll-up Installation Get from npm / yarn: npm i vue-scroll-up yarn add vue-scroll-up or just include vue-scroll-up.js to your view like <script

Willy Hong 8 Feb 16, 2022
👁 Declarative Vue component that emits an event when scrolled into view

vue-visibility-trigger Vue component that emits an event when scrolled into view Installation Install the package from npm by running $ yarn add vue-v

William Lindvall 5 May 30, 2021
🎰 Scroll-in text component for Vue

Scroll-in text component for Vue 'vue-scrollin' is a Vue component that scrolls through various characters on mount before revealing the correct text.

William Lindvall 61 Feb 16, 2022
A reusable component for Vue 3 that renders a list with a huge number of items (e.g. 1000+ items) as a grid in a performant way.

A reusable component for Vue 3 that renders a list with a huge number of items (e.g. 1000+ items) as a grid in a performant way.

Roc Wong 158 Sep 30, 2022
A scroll to top component for Vue 3

A scroll to top component for Vue 3

Willy Hong 4 Aug 26, 2021
Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices

vue-pinch-scroll-zoom Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices example: h

CoddiCat 24 Sep 9, 2022