[vue] 超简单锚点平滑滚动demo

最新推荐文章于 2024-04-03 10:32:00 发布

lyt-top

最新推荐文章于 2024-04-03 10:32:00 发布

阅读量1.6k

点赞数 1

文章标签： vue flex es6

本文链接：https://blog.csdn.net/qq_34450741/article/details/103587081

版权

彩蛋：后台管理系统一站式平台模板

vue-admin-wonderful，一套为开发者快速开发准备的基于 vue2.x 越看越精彩的后台管理系统一站式平台模板。基于element ui 2.14.0

1、效果图

在这里插入图片描述

2、代码（过于简单，就不多解释了），直接复制即可运行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue锚点平滑滚动</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="demo-app" v-cloak>
			<div class="demo-left" ref="demoLeft" @scroll="onScroll">
				<div class="left-box" v-for="(v) in 10" :key="v" ref="leftBox">
					<span>{{v}}</span>
				</div>
			</div>
			<div class="demo-right">
				<div class="right-nav-box">
					<div class="right-nav" v-for="(v,k) in 10" :key="k" @click="onHandlerClick(k)" :class="{'right-nav-active': active === k}"
					 ref="rightNav">{{v}}</div>
				</div>
			</div>
		</div>
	</body>

	<script>
		const vm = new Vue({
			el: '#demo-app',
			data() {
				return {
					active: 0,
					activeArr: []
				}
			},
			mounted() {
				this.init()
				window.onresize = () => {
					this.init()
				}
			},
			methods: {
				init() {
					this.$nextTick(() => {
						setTimeout(() => {
							this.activeArr = []
							this.$refs['leftBox'].map(item => {
								item.style.background = `#${Math.floor(Math.random() * 0xffffff).toString(16)}`
								this.activeArr.push(item.offsetTop)
							})
						}, 300) // 延时加载，防止拿到的数值不准确
					})
				},
				onHandlerClick(index) {
					this.$refs['demoLeft'].scrollTo({
						top: this.$refs['leftBox'][index].offsetTop,
						behavior: 'smooth'
					})
				},
				onScroll(e) {
					this.activeArr.map((item, index) => {
						if (e.target.scrollTop + 200 >= item) {
							this.active = index
						}
					})
				}
			}
		})
	</script>

	<style>
		[v-cloak] {
			display: none;
		}

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		html,
		body {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		#demo-app {
			display: flex;
			width: 100%;
			height: 100%;
		}

		.demo-left {
			flex: 1;
			flex-shrink: 1;
			overflow: auto;
		}

		.left-box {
			width: 100%;
			height: 100%;
			display: flex;
		}

		.left-box span {
			margin: auto;
			font-size: 70px;
		}

		.demo-right {
			flex-basis: 100px;
			display: flex;
			flex-direction: column;
		}

		.right-nav-box {
			margin: auto;
			width: 100%;
		}

		.right-nav {
			border: 1px solid #09F;
			border-bottom: none;
			width: 100%;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
		}

		.right-nav:last-child {
			border-bottom: 1px solid #09F;
		}

		.right-nav-active {
			background: #09F;
			color: white;
		}

		.right-nav:hover {
			background: #09F;
			color: white;
		}
	</style>
</html>

lyt-top

关注

1
点赞
踩
20

收藏

觉得还不错? 一键收藏
2
评论
[vue] 超简单锚点平滑滚动demo

1、效果图2、代码（过于简单，就不多解释了），直接复制即可运行<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue锚点平滑滚动</title> <script src="https://cdn.jsdelivr.net/...
复制链接

扫一扫