$ScrollIntoView 视图滚动

概述

滚动至视图内。

代码示例

演示

基本用法。

定位的元素

<template>
    <div>
        <Button @click="handleScroll('top')">定位至视图顶部</Button>
        <Button @click="handleScroll('center')">定位至视图中部</Button>
        <div class="demo-scroll-into-view">
            <div class="demo-scroll-target" ref="target">定位的元素</div>
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                to: 200,
                time: 1000
            }
        },
        methods: {
            handleScroll (position) {
                this.$ScrollIntoView(this.$refs.target, {
                    time: 1000,
                    align: {
                        top: position === 'top' ? 0 : 0.5, // 视图比例 0 to 1, 默认 0.5 (center)
                        topOffset: position === 'top' ? 80 : 0 // 视图位移 pixels to offset top alignment
                    }
                })
            }
        }
    }
</script>
<style>
    .demo-scroll-into-view{
        height: 1000px;
        position: relative;
        border: 1px solid #999;
    }
    .demo-scroll-target{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>

Expand Copy Copy

API

$ScrollIntoView Params

有 3 个参数：

• el：Element, 需要滚动的元素，必填
• setting：Object, 配置项，选填，详见下表
• callback：回调函数，如果第二个参数 setting 没有，则 callback 作为第二个参数

setting Props

属性	说明	类型	默认值
time	滚动时间，单位：毫秒	Number	1000
ease	滚动动画	Function	(v) => {return 1 - Math.pow(1 - v, v / 2)}
align	定位设置，有4个值可选： 1. top：top 比例，可选值为 0~1，默认0.5(center) 2. left：left 比例，同 top 3.topOffset：top 偏移，单位：px 4. leftOffset：left 偏移，单位：px	Object	-