vue scrollview 锚点

困困自习室

已于 2024-03-18 10:32:32 修改

阅读量69

点赞数

文章标签： vue.js 前端 javascript css

于 2024-03-18 10:23:26 首次发布

原文链接：https://blog.csdn.net/zhoumeina99/article/details/123979782

版权

文章介绍了在Vue.js应用中，如何使用el-selectv-model实现动态下拉选项选择后，通过判断滚动条位置并执行平滑滚动效果，使用户界面更流畅地跳转到对应的列表项。

摘要由CSDN通过智能技术生成

<template>
 	<div> 
 		<el-select v-model="sysID" filterable placeholder="请选择" @change="chooseSys">
 			<el-option v-for="item in sysList" :key="item.id" :label="item.room_name" :value="item.id">
 			</el-option> 
 		</el-select>
 	</div>
     
   <!--  scroll view  -->                  
	<div class="listBox">
    	<div class="listItem" v-for="(item, index) in sysList">
    		<div> {{ item.room_name }}</div>  		
    	</div>
    </div>
</template>

<script>
    chooseSys() {
            this.sysList.map((a, ia) => {
                if (this.sysID == a.id) {                
                    this.jump(ia)
                    return
                }
            })
     },
        
	jump(index) {
            let target = document.querySelector('.listBox')
            let scrollItems = document.querySelectorAll('.listItem')
            // 判断滚动条是否滚动到底部
            if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
                this.activeStep = index
            }
            let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)
            let distance = document.querySelector('.listBox').scrollTop // 滚动条距离滚动区域顶部的距离

            // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 浏览器兼容 滚动条距离滚动区域顶部的距离(滚动区域为窗口)

            // 滚动动画实现, 使用setTimeout的递归实现平滑滚动，将距离细分为50小段，10ms滚动一次

            // 计算每一小段的距离

            let step = total / 50
            if (total > distance) {
                smoothDown(document.querySelector('.listBox'))
            } else {
                let newTotal = distance - total
                step = newTotal / 50
                smoothUp(document.querySelector('.listBox'))
            }

            // 参数element为滚动区域

            function smoothDown(element) {
                if (distance < total) {
                    distance += step
                    element.scrollTop = distance
                    setTimeout(smoothDown.bind(this, element), 10)
                } else {
                    element.scrollTop = total
                }
            }

            // 参数element为滚动区域
            function smoothUp(element) {
                if (distance > total) {
                    distance -= step
                    element.scrollTop = distance
                    setTimeout(smoothUp.bind(this, element), 10)
                } else {
				element.scrollTop = total
				}
			}
	},
</script>