Vue中使用js控制滚动条动画滚动_js 设置滚动条位置动画

网上最全的让人看了头疼的这个，可以参考：

效果展示：

重点代码：
确定滚动的位置：

// 上下左右键，影响滚动到特定位置
        scrollTo() {
            let { current_index } = this.n;
            // 滚动的节点
            let cnode = this.$el.querySelector('.penguins');
            let child = cnode.children[0];
            // 进度条向上/下滚动间距：一个桌面的块高+20px上间距
            let childMargin = ~~getComputedStyle(child).marginTop.replace('px', '');
            let spaceHeight = child.offsetHeight + childMargin;
            let current = cnode.scrollTop;
            let endHeight = cnode.scrollHeight - cnode.offsetHeight;
            let target;
            /**
             * current_index：目标位置的索引
             * 因为最后两行在可视区域内，此时进度条需滚至最末，不会再滚动
             * 倒数第三行-->倒数第二行，进度条滚至最末，
             * 倒数第二行-->倒数第一行，进度条仍在最末
             */
            let isPenultimateLine = Math.floor((this.n.dataList.length - 1) / 3) - Math.floor(current_index / 3);
            console.log('isPenultimateLine:' + isPenultimateLine);
            if (isPenultimateLine <= 1) {
                target = endHeight;
            } else {
                target = Math.floor(current_index / 3) * spaceHeight;
            }
            // 若还未滚至末尾，则从滚动条当前位置current滚动到target目标位置，动画滚动
            this.animateTo(cnode, current, target);
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

滚动动画：

animateTo(node, current, target) {
            console.log(current + '------' + target);
            /**
             * 当前位置等于目标位置则不滚动，
             * 比如当前在最后一行，按↑ 上键至倒数第二行，应不滚动
             * 或当前在倒数第二行，按↓ 下键至最后一行，应不滚动
             */
            if (current === target) return;
            clearInterval(node.timer);
            let step = (target - current) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            node.timer = setInterval(() => {
                node.scrollTop = node.scrollTop + step;
                if (Math.abs(target - node.scrollTop) < Math.abs(step)) {
                    node.scrollTop = target;
                    clearInterval(node.timer);
                }
            }, 15);
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

详细代码，复制即可运行
企鹅图片，自行下载：

// App.vue
<template>
    <div class="app">
        <PenguinList />
    </div>
</template>
<script>
// 在Vue的组件入口中，引入写的组件，具体位置具体引入
import PenguinList from '@/components/PenguinList';

export default {
    name: 'app',
    components: {
        PenguinList
    }
};
</script>
<style lang="less">
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

.app {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#233c90, #121d38) !important;
    color: #fff !important;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

PenguinList企鹅列表组件：

// PenguinList.vue
<template>
    <div class="penguin-list">
        <div class="penguins transparent-right-scroll">
            <div
                v-for="(item, index) in n.dataList"
                :key="'penguin' + index"
                :class="[n.current_index === index ? 'penguin-focus' : '', (index + 1) % 3 !== 0 ? 'block-mr' : '']"
                :penguin-id="index + 1"
            >
                <div class="left-img">
                    <img src="@/assets/imgs/penguin.jpg" alt="" />
                    <span>小芒果</span>
                </div>
                <div class="right-desc">
                    <span class="title">{{ item.name }}</span>
                    <div class="desc">{{ item.desc }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'PenguinList',
    data() {
        return {
            n: {
                current_index: 0,
                dataList: []
            }
        };
    },
    mounted() {
        this.onLoad();
        this.listenHotKeys();
    },
    methods: {
        onLoad() {
            let data = [];
            for (let i = 0; i < 10; i++) {
                data.push({ id: 1, name: '企鹅' + i, desc: '真可爱' });
            }
            this.n.dataList = data;
        },
        listenHotKeys() {
            // 监听快捷键
            window.onkeyup = (e) => {
                let { current_index } = this.n;
                // ← 左
                if (e.keyCode === 37) {
                    if (current_index > 0) {
                        this.$set(this.n, 'current_index', current_index - 1);
                        this.scrollTo();
                        console.log('← 左');
                    }
                }
                // ↑ 上
                if (e.keyCode === 38) {
                    if (current_index >= 3) {
                        this.$set(this.n, 'current_index', current_index - 3);
                        this.scrollTo();
                        console.log('↑ 上');
                    }
                }
                // → 右
                if (e.keyCode === 39) {
                    if (current_index < this.n.dataList.length - 1) {
                        this.$set(this.n, 'current_index', current_index + 1);
                        this.scrollTo();
                        console.log('→ 右');
                    }
                }
                // ↓ 下
                if (e.keyCode === 40) {
                    if (this.n.dataList.length - current_index > 3) {
                        this.$set(this.n, 'current_index', current_index + 3);
                        console.log(this.n.current_index);
                        this.scrollTo();
                        console.log('↓ 下');
                    }
                }
            };
        },
        // 上下左右键，影响滚动到特定位置
        scrollTo() {
            let { current_index } = this.n;
            // 滚动的节点
            let cnode = this.$el.querySelector('.penguins');
            let child = cnode.children[0];
            // 进度条向上/下滚动间距：一个桌面的块高+20px上间距
            let childMargin = ~~getComputedStyle(child).marginTop.replace('px', '');
            let spaceHeight = child.offsetHeight + childMargin;
            let current = cnode.scrollTop;
            let endHeight = cnode.scrollHeight - cnode.offsetHeight;
            let target;
            /**
             * current_index：目标位置的索引
             * 因为最后两行在可视区域内，此时进度条需滚至最末，不会再滚动
             * 倒数第三行-->倒数第二行，进度条滚至最末，
             * 倒数第二行-->倒数第一行，进度条仍在最末
             */
            let isPenultimateLine = Math.floor((this.n.dataList.length - 1) / 3) - Math.floor(current_index / 3);
            console.log('isPenultimateLine:' + isPenultimateLine);
            if (isPenultimateLine <= 1) {
                target = endHeight;
            } else {
                target = Math.floor(current_index / 3) * spaceHeight;
            }
            // 若还未滚至末尾，则从滚动条当前位置current滚动到target目标位置，动画滚动
            this.animateTo(cnode, current, target);
        },
        animateTo(node, current, target) {
            console.log(current + '------' + target);
            /**
             * 当前位置等于目标位置则不滚动，
             * 比如当前在最后一行，按↑ 上键至倒数第二行，应不滚动
             * 或当前在倒数第二行，按↓ 下键至最后一行，应不滚动
             */
            if (current === target) return;
            clearInterval(node.timer);
            let step = (target - current) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            node.timer = setInterval(() => {
                node.scrollTop = node.scrollTop + step;
                if (Math.abs(target - node.scrollTop) < Math.abs(step)) {
                    node.scrollTop = target;
                    clearInterval(node.timer);
                }
            }, 15);
        }
    },
    beforeDestroy() {
        // 取消监听该页面特定的键盘事件
        window.onkeyup = () => {};
    }
};
</script>
<style lang="less" scoped>
.penguin-list {
    width: 80%;
    margin: 0 auto;
    height: 350px;
    padding-top: 50px;
    .penguins {
        height: 300px;
        width: 100%;
        overflow-y: scroll;
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
        background-color: rgb(183, 246, 207);
        & > div {
            width: 32%;
            margin-top: 20px;
            padding: 38px 20px 20px 34px;
            cursor: pointer;
            background-color: rgb(238, 210, 184);
            color: #000;
            border-radius: 3px;
            .left-img {
                width: 60px;
                float: left;
                position: relative;
                & > span {
                    position: absolute;
                    top: -18px;
                    left: -14px;
                    margin-left: 3px;
                    padding: 0 4px;
                    border-radius: 3px;
                    font-size: 12px;
                    border: 1px solid #17be69;
                    color: #17be69;
                    background-color: #aafdd2;
                }
                img {
                    width: 100%;
                }
            }
            .right-desc {
                float: right;
                width: calc(100% - 60px);
                padding: 5px 0 0 10px;

                .title {
                    width: 100%;
                    font-weight: bold;
                    font-size: 20px;
                }
                .desc {
                    color: #666;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
        .penguin-focus {
            box-shadow: 0 5px 10px 5px rgba(110, 110, 110, 0.4);
            background-color: #949da7;
        }
        .block-mr {
            margin-right: 2% !important;
        }
    }
}
/**
  * 透明滚动条
  */
.transparent-right-scroll {
    /* 滚动条整体样式 */
    &::-webkit-scrollbar {
        width: 0;
    }
}
</style>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220