Rescue Agency Vue Component Library

# scroll-indicator

This component adds a visual indicator that a section of content is scrollable. The visual indicator disappears when you reach the end of the section.

# Example

<scroll-indicator :icon="require('./assets/scroll-down-icon.png')">
    ... scrollable content here ...
</scroll-indicator>

Scroll to the bottom of this box.

Bacon ipsum dolor amet shank tri-tip chuck, biltong porchetta tail rump jowl boudin pork. Capicola landjaeger brisket short loin, strip steak swine ham alcatra pork chop. Bresaola ribeye tenderloin chicken, alcatra pork hamburger buffalo pig rump salami drumstick. Tenderloin ham salami, filet mignon pork chop landjaeger pork sirloin. Cupim swine frankfurter hamburger short loin pastrami ball tip shank tri-tip.

Kevin sausage ground round burgdoggen. Pork short loin sausage jowl, t-bone pork loin venison. Salami buffalo hamburger shankle jerky kevin. Meatball ball tip corned beef, brisket jowl bresaola spare ribs jerky. Jowl alcatra t-bone, jerky pig tri-tip chicken bacon pastrami. Turducken boudin beef porchetta.

Tri-tip filet mignon cupim hamburger swine kielbasa jerky pork bresaola pork chop turkey rump ribeye bacon. Meatloaf prosciutto sirloin leberkas pig corned beef. Strip steak buffalo kielbasa, boudin bacon pork turkey hamburger beef ribs sausage ground round jerky leberkas spare ribs shoulder. Prosciutto leberkas ribeye, pig sausage pork loin buffalo bacon strip steak corned beef pastrami pancetta kielbasa. Pastrami beef short ribs, chuck capicola biltong boudin short loin buffalo bacon salami. Pastrami burgdoggen drumstick, ri-tip porchetta rump cupim pork belly boudin ribeye. Flank sausage tenderloin, pork shank pancetta brisket bacon landjaeger ball tip beef biltong pastrami short ribs.

Scroll Down

# slots

content (required) content to be scrollable

# props

icon (required) image to use as the scroll down icon

# Source Code

<template>
    <div class="scroll-indicator">
        <div class="scroll-indicator-container" v-on:scroll="handleScroll" ref="scrollable">
            <slot></slot>
        </div>
        <transition name="fade">
            <div class="scroll-indicator-icon" ref="icon" v-if="showIcon">
                <img :src="icon" alt="Scroll Down" />
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    name: "scroll-indicator",
    props: {
        icon: {
            type: String,
            default: null
        }
    },
    data: function() {
        return {
            showIcon: true
        };
    },
    mounted: function() {
        this.checkPosition();
    },
    methods: {
        checkPosition: function() {
            const scrollable = this.$refs["scrollable"];

            if (
                scrollable.scrollTop + this.$el.clientHeight >=
                scrollable.scrollHeight
            ) {
                this.showIcon = false;
            } else if (!this.showIcon) {
                this.showIcon = true;
            }
        },
        handleScroll: function() {
            this.checkPosition();
        }
    }
};
</script>

<style lang="scss">
.scroll-indicator {
    position: relative;
    height: 100%;
    width: 100%;

    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.25s;
    }

    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }

    .scroll-indicator-container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .scroll-indicator-icon {
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        padding: 3em 0 1em 0;
        background-image: linear-gradient(to bottom, transparent, white);
    }
}
</style>

← poll →