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

 更新时间:2023年05月19日 09:47:52   作者:换日线°  
这篇文章主要介绍了vue如何移动到指定位置(scrollIntoView)亲测避坑,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue移动到指定位置(scrollIntoView)

用(scrollIntoView)来实现移动到指定位置建议不要放在(mt-loadmore)里使用,不然头部会被挤上去----亲测

  • html
<div id="pronbit" ref="pronbit">需要移动到的位置</div>
  • js
//选中id
document.getElementById(e).scrollIntoView({
	behavior: "smooth",  // 平滑过渡
	block:    "start"  // 上边框与视窗顶部平齐。默认值
});
// 选中ref
this.$refs.pronbit.scrollIntoView({
	behavior: "smooth",  // 平滑过渡
	block:    "start"  // 上边框与视窗顶部平齐。默认值
});
//要是放在mounted()里执行使用
this.$refs.pronbit.scrollIntoView();//不然只执行一次刷新了也一样
//禁止scrollIntoView
this.$refs.pronbit.scrollIntoView(false);

上面介绍使用方法 下面请看效果图

<template>
	<div id="app">
	<!-- 轮播 -->
	<div class="planting">
	<cube-slide ref="slide" :data="items" @change="changePage">
		<cube-slide-item v-for="(item, index) in items" :key="index" @click.native="clickHandler(item, index)">
		    <img @click="imgus('aa'+index)" :src="item.image">
		</cube-slide-item>
	</cube-slide> 
	</div>
	<!-- 轮播 -->
	<img style="width: 100%;float: left;" v-for="(item,index) in items" :id="'aa'+index" :src="item.image">
	<img style="width: 100%;float: left;" v-for="(item,index) in 3" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1076778629,484203681&fm=11&gp=0.jpg">
	</div>
</template>
<script>
import { getHomeData } from "@/api/public";
import dialog from "@/utils/dialog";//弹窗
export default {
  props: {
    msg: String
  },
  data() {
    return {
		items: [
		{
		  url: '',
		  image: 'http://img3.imgtn.bdimg.com/it/u=1960330002,2943700579&fm=26&gp=0.jpg'
		},
		{
		  url: '',
		  image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=225193914,751284870&fm=26&gp=0.jpg'
		},
		{
		  url: '',
		  image: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3019995954,636527762&fm=26&gp=0.jpg'
		}
		],
    }
  },
  mounted(){
  },
  methods: {
	  //滚动指定位置
	  imgus:function(e){
	  	document.getElementById(e).scrollIntoView({
	  	  behavior: "smooth",  // 平滑过渡
	  	  block:    "start"  // 上边框与视窗顶部平齐。默认值
	  	});
	  },
	  // 轮播
	  changePage(current) {
	    console.log('当前轮播图序号为:' + current)
	  },
	  clickHandler(item, index) {
	    console.log(item, index)
	  },
   },
}
</script>
<style>
	.cube-slide-item img{
		width: 100%;
		height: 100%;
	}
	.planting{
		width: 100%;
		height: 6rem;
		overflow: hidden;
	}
	.cube-slide-dots{
		position:absolute;
		bottom: 0.3rem;
	}
	.cube-slide-dots>span{
		height: 2px;
	}
</style>

引入了滴滴组件的可以直接使用(建议参考)

scrollIntoView导致元素偏移问题

element.scrollIntoView()

需要默认为true element.scrollIntoView()等同于element.scrollIntoView(true)

(默认值)描述
true元素的顶部将对齐到可滚动祖先的可见区域的顶部
false元素的底部将与可滚动祖先的可见区域的底部对齐。

但是

scrollIntoView当元素超出可视区域的时候就会出现元素偏移的情况

解决办法有两个

1.修改元素

`height:100%;overflow:auto`

2.

 var Id= document.getElementById("###(##代表id)");
Id.parentNode.scrollTop = Id.offsetTop;

这样会默认跑到顶端但是会出现一个问题使得元素的一半出不来

3.最好

 var Id= document.getElementById("###(##代表id)");
Id.parentNode.scrollTop = Id.offsetTop- Id.offsetHeight;

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解

    对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解

    今天小编就为大家分享一篇对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue中的ref作用详解(实现DOM的联动操作)

    Vue中的ref作用详解(实现DOM的联动操作)

    这篇文章主要介绍了Vue中的ref作用详解(实现DOM的联动操作),需要的朋友可以参考下
    2017-08-08
  • Vue2+Quill富文本编辑器详解

    Vue2+Quill富文本编辑器详解

    文章指出Quill 2.0.0-dev.4与2.0.2版本存在兼容性问题,原因未知,主要步骤包括引入依赖、创建编辑器组件、使用及效果测试
    2025-08-08
  • axios全局请求参数设置,请求及返回拦截器的方法

    axios全局请求参数设置,请求及返回拦截器的方法

    下面小编就为大家分享一篇axios全局请求参数设置,请求及返回拦截器的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 详解Vue进阶构造属性

    详解Vue进阶构造属性

    这篇文章主要介绍了Vue进阶构造属性,从4个方面来进行讲解:Directive、Mixin 混入、Extends 继承、provide 和 inject,感兴趣的小伙伴们,赶快来看一下
    2021-05-05
  • vue中的config目录下index.js解读

    vue中的config目录下index.js解读

    这篇文章主要介绍了vue中的config目录下index.js解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • 在Vue Router中定义路由规则的操作方法

    在Vue Router中定义路由规则的操作方法

    在现代Web开发中,前端框架的使用越来越普遍,而Vue.js作为一款优秀的前端框架,其生态系统中有着非常重要的一个组件——Vue Router,在本篇博客中,我们将深入探讨如何在Vue Router中定义路由规则,需要的朋友可以参考下
    2024-12-12
  • Vue常见报错整理大全(从此报错不害怕)

    Vue常见报错整理大全(从此报错不害怕)

    写代码的过程中一定会遇到报错,遇到报错不要担心,认真分析就可以解决报错,同时积累经验,早日成为大牛,这篇文章主要给大家介绍了关于Vue常见报错整理的相关资料,需要的朋友可以参考下
    2022-08-08
  • Vue指令详解之v-if与v-show的对比与常见应用分析

    Vue指令详解之v-if与v-show的对比与常见应用分析

    Vue提供了v-if和v-show两个指令来实现条件渲染,虽然它们都能控制元素的显示与隐藏,但在实现机制和使用场景上有着显著差异,本文将深入探讨这两个指令的工作原理、性能特点以及适用场景,帮助开发者在实际项目中做出合理选择,感兴趣的朋友跟随小编一起看看吧
    2025-09-09
  • vue-router的使用方法及含参数的配置方法

    vue-router的使用方法及含参数的配置方法

    这篇文章主要介绍了vue-router的使用方法及含参数的配置方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11

最新评论