vue scrollview 锚点

文章介绍了在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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值