A Vue directive that prevents vertical scrolling outside the current element when top or bottom are reached.

Overview

Description

A Vue directive that prevents vertical scrolling outside the current element when top or bottom are reached.

Installation

npm install --save vue-prevent-parent-scroll

Example

import Vue from 'vue'

Vue.use(require('vue-prevent-parent-scroll'))
">
<div id="parent">
  <div id="scrollable-child" v-prevent-parent-scroll>
  div>
div>
You might also like...
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

A vue directive that support multiple DOM Node stick to top automatically (一个支持多DOM元素自动吸顶的vue指令)
A vue directive that support multiple DOM Node stick to top automatically (一个支持多DOM元素自动吸顶的vue指令)

vue-stickto 简体中文 A vue directive that support multiple DOM Node stick to top automatically (一个支持多DOM元素自动吸顶的vue指令) Online Demo Here Install npm install

A simple web component (Vue.js = 3.2) that provides infinite scrolling to display a large array of data one element at a time

infinite-scroller-comp infinite-scroller-comp is a Vue.js (=3.2) web component that provides a content area and an associated vertical scroll bar. Th

A Vue plugin which supervises binding element's scrolling and trigger target elements class

A Vue plugin which supervises binding element's scrolling and trigger target elements class

A Vue plugin which supervises binding element's scrolling and trigger target elements class

vue-scroll-trigger A Vue plugin which supervises binding element's scrolling and trigger target elements class Sample BEHIVE-DESIGN Install with yarn

A vue directive to make a scrollable element scroll by draging to the scroll direction

vue-dragscroll vue-dragscroll is a micro vue.js directive which enables scrolling via holding the mouse button ("drag and drop" or "click and hold" st

A Vue.JS plugin directive to remember element scroll-position when detached

A Vue.JS plugin directive to remember element scroll-position when detached Problem If a DOM fragment is removed from the DOM and t

Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll
Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll

Vue2 Smooth Scroll Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll. For simple use-cases, the native scroll-behavior CSS p

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

Comments
  • Seems to block everything in the scrollable child instead of around it.

    Seems to block everything in the scrollable child instead of around it.

    Steps to reproduce:

    Here is a laravel blade view at the bottom I'll add the simple script, the scrollable_child div is a few paragraphs down.

    I'll add the script on the bottom. would be great if this worked. thx.

    
    <body>
    <div id="test-lock">
        <div id="parent">
            <section>
                <div class="container" id="spot1">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                        maxime nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                        iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                        ipsam magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                        voluptatum! Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
            <section>
                <div class="container" id="spot2">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                        maxime nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                        iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                        ipsam magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                        voluptatum! Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
    
            <section>
                <div class="container" id="spot3">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                        maxime nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                        iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                        ipsam magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                        voluptatum! Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
            <section>
                <div class="container" id="spot4">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                        maxime nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                        iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                        ipsam magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                        voluptatum! Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
            <section>
                <div class="container" id="spot5">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                        maxime nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                        iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                        ipsam magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                        voluptatum! Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
            <div id="scrollable_child" style="background-color: rgba(0,0,0,0.6); color: #FFF" v-prevent-parent-scroll>
                <section>
                    <div class="container" id="spot1">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot2">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
    
                <section>
                    <div class="container" id="spot3">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot4">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot5">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot6">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot7">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot8">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot1">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot2">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
    
                <section>
                    <div class="container" id="spot3">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot4">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot5">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot6">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot7">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot8">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot1">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot2">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
    
                <section>
                    <div class="container" id="spot3">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot4">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot5">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot6">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot7">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot8">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot1">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot2">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
    
                <section>
                    <div class="container" id="spot3">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot4">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot5">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot6">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot7">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
                <section>
                    <div class="container" id="spot8">
                        <h2>Your journey starts here.</h2>
                        <p> This is it. You've made it so far. There is no going back.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                            quaerat
                            ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias
                            maxime nisi
                            a consequuntur?</p>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis,
                            iste
                            quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut
                            ipsam magnam
                            corporis aut.</p>
                        <h3>Get lost and find yourself.</h3>
                        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                            veritatis
                            culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur
                            voluptatum! Dolor
                            accusamus labore, sequi.</p>
                    </div>
                </section>
            </div>
    
            <section>
                <div class="container" id="spot1">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime
                        nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam
                        magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum!
                        Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
            <section>
                <div class="container" id="spot2">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime
                        nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam
                        magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum!
                        Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
    
            <section>
                <div class="container" id="spot3">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime
                        nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam
                        magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum!
                        Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
            <section>
                <div class="container" id="spot4">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime
                        nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam
                        magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum!
                        Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
            <section>
                <div class="container" id="spot5">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime
                        nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam
                        magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum!
                        Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
            <section>
                <div class="container" id="spot6">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime
                        nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam
                        magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum!
                        Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
            <section>
                <div class="container" id="spot7">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime
                        nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam
                        magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum!
                        Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
            <section>
                <div class="container" id="spot8">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime
                        nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam
                        magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum!
                        Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
            <section>
                <div class="container" id="spot1">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime
                        nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam
                        magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum!
                        Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
            <section>
                <div class="container" id="spot2">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime
                        nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam
                        magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum!
                        Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
    
            <section>
                <div class="container" id="spot3">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime
                        nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam
                        magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum!
                        Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
            <section>
                <div class="container" id="spot4">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime
                        nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam
                        magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum!
                        Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
            <section>
                <div class="container" id="spot5">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime
                        nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam
                        magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum!
                        Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
            <section>
                <div class="container" id="spot6">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime
                        nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam
                        magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum!
                        Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
            <section>
                <div class="container" id="spot7">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime
                        nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam
                        magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum!
                        Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
            <section>
                <div class="container" id="spot8">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime
                        nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam
                        magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum!
                        Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
            <section>
                <div class="container" id="spot1">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime
                        nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam
                        magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum!
                        Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
            <section>
                <div class="container" id="spot2">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime
                        nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam
                        magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum!
                        Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
    
            <section>
                <div class="container" id="spot3">
                    <h2>Your journey starts here.</h2>
                    <p> This is it. You've made it so far. There is no going back.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iste molestias vel commodi, quae
                        quaerat
                        ex numquam. Consectetur corporis explicabo, qui labore, repellat dignissimos illo molestias maxime
                        nisi
                        a consequuntur?</p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit fuga autem dolore, ex nobis, iste
                        quasi, asperiores esse repellendus tempore, obcaecati numquam minima maxime! Laboriosam, ut ipsam
                        magnam
                        corporis aut.</p>
                    <h3>Get lost and find yourself.</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi placeat dolor molestias facere
                        veritatis
                        culpa amet fugiat debitis dolorem qui quidem consequuntur mollitia, nesciunt pariatur voluptatum!
                        Dolor
                        accusamus labore, sequi.</p>
                </div>
            </section>
        </div>
    </div>
    <script src="/js/app.js"></script>
    @include('segments.scripts.test.test-scroll-lock')
    </body>
    
    
    

    The included script is here:

    
    let scrollLock = new Vue({
            el: '#test-lock',
            data: {
    
            },
    
            methods: {
    
            },
    
        });
    
    

    Vue and the resource are instantiated in app.js through laravel 5.4. Finally, arrow keys and touch events don't work.

    opened by roni-estein 3
  • Update main.ts

    Update main.ts

    Hey,

    thanks for creating this neat little helper. I implemented this into the my project but I saw that you did not consider the overflow. Currently when you scroll extremly fast the parent still scrolls a bit. In order to disable this you need to substract the delta. Please give this a test first. :)

    Best zugende

    opened by zugende 0
Owner
Carlos González
Carlos González
Animating vertical and horizontal scrolling

Animating vertical and horizontal scrolling. Inspired by rigor789/vue-scrollto and uses some of its code and functionality!!

Uther Pally 64 Oct 4, 2022
A tiny Vue directive that stop propagation scroll when edge reached

vue-scroll-stop A tiny Vue directive that stop propagation scroll when edge reached. Works with desktop mousewheel and mobile touchmove events ✅ On ❌

Volodymyr Antoniuk 41 Feb 4, 2022
Vue Scroll Show - Showing the element if the user reached it after scroll

Vue Scroll Show Showing the element if the user reached it after scroll Installation npm i --save-dev vue-scroll-show import VueScrollShow from 'vue-s

Aleksey Pleshkov 10 Jan 5, 2022
A Vue.js directive to add a class to an based on vertical scroll

A Vue directive to easily add and remove a class from an element when the screen is scrolled past a given point

Jase Pellerin 6 Jan 8, 2020
🖱️ Vue directive to keep things scrolled to the bottom.

Installing Using a package manager (recommended) The recommended way of installing vue-chat-scroll is using the npm package with the npm (or yarn) pac

Theodore Messinezis 552 Nov 14, 2022
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 182 Nov 24, 2022
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 183 Nov 11, 2022
A Vue directive to lock the body scroll without stopping the target element from scrolling

A Vue directive to lock the body from scrolling without stopping the target element from scrolling

Bram Honingh 30 Jul 10, 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 183 Nov 17, 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 183 Nov 17, 2022