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滚动到指定位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue+ElementUI技巧之自定义表单项label的文字提示方法

    Vue+ElementUI技巧之自定义表单项label的文字提示方法

    这篇文章主要给大家介绍了关于Vue+ElementUI技巧之自定义表单项label文字提示的相关资料,文中通过图文以及代码示例介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-02-02
  • Vuex 入门教程

    Vuex 入门教程

    这篇文章主要介绍了Vuex 入门教程,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式, 那这个 vuex 怎么用呢?就具体来看一下吧
    2018-01-01
  • vue中$emit传递多个参(arguments和$event)

    vue中$emit传递多个参(arguments和$event)

    本文主要介绍了vue中$emit传递多个参(arguments和$event),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • vue和webpack打包项目相对路径修改的方法

    vue和webpack打包项目相对路径修改的方法

    这篇文章主要介绍了vue和webpack打包项目相对路径修改的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】

    vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】

    这篇文章主要介绍了vue-video-player,通过自定义按钮组件实现全屏切换效果,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • Vue-cli 如何将px转化为rem适配移动端

    Vue-cli 如何将px转化为rem适配移动端

    这篇文章主要介绍了Vue-cli 如何将px转化为rem适配移动端,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-07-07
  • 详解Jest结合Vue-test-utils使用的初步实践

    详解Jest结合Vue-test-utils使用的初步实践

    这篇文章主要介绍了详解Jest结合Vue-test-utils使用的初步实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • Vue 3项目如何安装Element-Plus

    Vue 3项目如何安装Element-Plus

    Element Plus 是一个基于 Vue 3 的现代前端UI框架,它旨在提升开发体验,并为开发者提供高效、优雅的组件,在本文中将详细介绍如何在 Vue 3 项目中安装 Element Plus,感兴趣的朋友一起看看吧
    2024-07-07
  • vue项目无法删除的问题及解决

    vue项目无法删除的问题及解决

    这篇文章主要介绍了vue项目无法删除的问题及解决方案,具有很好的参考价值,希望对的大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • ElementPlus函数式弹窗调用的实现

    ElementPlus函数式弹窗调用的实现

    在前端开发中,弹窗组件是必不可少的交互元素,本文就来详细的介绍一下ElementPlus函数式弹窗调用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-09-09

最新评论