Vue滚动到指定位置的多种方式示例详解

更新时间：2023年08月16日 09:19:19 作者：qsya

当容器有滚动条时,有时需要将指定的内容自动滚动到可视区域,怎么实现呢,下面小编给大家带来了多种方法实现Vue滚动到指定位置,感兴趣的朋友跟随小编一起看看吧

脚本之家推荐阅读：

vue如何移动到指定位置(scrollIntoView)亲测避坑

vue实现滚动条到顶部或者到指定位置

解决Vue页面固定滚动位置的处理办法

需求：

当容器有滚动条时，有时需要将指定的内容自动滚动到可视区域。

方法一：锚点

锚点通过在元素上设置id，然后用a标签的href="#id"属性跳转到指定位置。也可以通过js中 window.location.hash= ‘#id’ 或 window.location.href = ‘#id’ 来跳转。

在这里插入图片描述

//dom
    <a href="#li50" rel="external nofollow" >跳到50</a>
    <ul class="ul" id="ul">
      <li v-for="(item, index) in new Array(100)" :key="index" :id="'li' + (index + 1)">
        {{ index + 1 }} 只羊
      </li>
    </ul>
	//或者js
     window.location.hash= '#li50';

hash和href的区别：

hash为锚链接，并不会跳转到新的链接，只会在当前链接里面改变锚链。
href表示重定向，得到完整的url，页面跳转到新的页面。

方法二：scrollTop

先计算指定dom距离顶部的高度offsetTop，再设置父元素的滚动距离scrollTop即可。

在这里插入图片描述

//dom
    <el-button type="primary" @click="link">跳到30</el-button>
	//js
	link() {
    	let target = document.getElementById('li30');
        let parent = document.getElementById('ul');
    	parent.scrollTop = target.offsetTop - parent.offsetTop;
    },

由于此处父元素距离顶部也有一定的高度，所以滚动距离需要先减去父元素的offsetTop，才是正确的滚动高度。

方法三：scrollTo

同scrollTop，只是换了种写法

    link() {
        let target = document.getElementById('li30');
        let parent = document.getElementById('ul');
        // parent.scrollTop = target.offsetTop - parent.offsetTop;
        parent.scrollTo(0, target.offsetTop - parent.offsetTop);
    },

也可以通过ref来指定dom

this.$refs.ul.scrollTo(0, 300);

方法四：scrollIntoView

简单粗暴，将指定元素滚动到可视区域顶部、底部或中间：

behavior 定义动画过渡效果：“auto”、 “smooth”

//顶部
document.getElementById('li60').scrollIntoView();
//底部
document.getElementById('li60').scrollIntoView(false);
//中间
document.getElementById('li60').scrollIntoView({ behavior: "smooth", block: 'center' });

在这里插入图片描述

Element.scrollIntoView()：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

到此这篇关于Vue滚动到指定位置的多种方式的文章就介绍到这了,更多相关Vue滚动到指定位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

VuePress使用Algolia实现全文搜索
这篇文章主要为大家介绍了VuePress使用Algolia实现全文搜索示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
Elementui如何限制el-input框输入小数点
这篇文章主要介绍了Elementui如何限制el-input框输入小数点，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Vue下拉框加分页搜索功能的实现方法
开发任务中有这样一个需求，下拉框中需要展示超过5000条数据，甚至更多，这数据量直接整个页面卡死了，就想到在下拉框中加分页，下面小编通过实例代码介绍下Vue下拉框加分页搜索功能的实现，感兴趣的朋友一起看看吧
2022-11-11
vue3中reactive和ref的实现与区别详解
reactive和ref都是vue3实现响应式系统的api,他们是如何实现响应式的呢,reactive和ref又有什么区别呢,下面小编就来和大家详细讲讲,希望对大家有所帮助
2023-10-10
Vue中使用SVG-ICON的配置方法
在项目开发中,经常会用到svg图标,之前用的都是vue-svg-icon,接下来通过本文给大家介绍Vue中使用SVG-ICON的配置方法,感兴趣的朋友跟随小编一起看看吧
2024-02-02
详解Vue2中组件间通信的解决全方案
Vue中组件这个特性让不少前端er非常喜欢，我自己也是其中之一，它让前端的组件式开发更加合理和简单。下面这篇文章主要给大家介绍了关于Vue2中组件间通信的解决全方案，文中通过示例代码介绍的非常详细，需要的朋友们下面来一起看看吧。
2017-07-07
vue中PC端使用高德地图实现搜索定位、地址标记、弹窗显示定位详情(完整实例)
这篇文章主要介绍了vue中PC端使用高德地图实现搜索定位、地址标记、弹窗显示定位详情,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-07-07
如何在VUE中使用vue-awesome-swiper
这篇文章主要介绍了如何在VUE中使用vue-awesome-swiper，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2021-01-01
Vue $event作为参数传递使用demo
这篇文章主要介绍了Vue $event作为参数传递使用demo详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
vue.js diff算法原理详细解析
这篇文章主要介绍了vue.js diff算法原理详细解析，diff算法可以看作是一种对比算法，对比的对象是新旧虚拟Dom。顾名思义，diff算法可以找到新旧虚拟Dom之间的差异，但diff算法中其实并不是只有对比虚拟Dom，还有根据对比后的结果更新真实Dom
2022-06-06