欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue如何移動(dòng)到指定位置(scrollIntoView)親測(cè)避坑

 更新時(shí)間：2023年05月19日 09:47:52   作者：換日線°  
這篇文章主要介紹了vue如何移動(dòng)到指定位置(scrollIntoView)親測(cè)避坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue移動(dòng)到指定位置(scrollIntoView)

用(scrollIntoView)來實(shí)現(xiàn)移動(dòng)到指定位置建議不要放在(mt-loadmore)里使用，不然頭部會(huì)被擠上去----親測(cè)

  • html
<div id="pronbit" ref="pronbit">需要移動(dòng)到的位置</div>
  • js
//選中id
document.getElementById(e).scrollIntoView({
	behavior: "smooth",  // 平滑過渡
	block:    "start"  // 上邊框與視窗頂部平齊。默認(rèn)值
});
// 選中ref
this.$refs.pronbit.scrollIntoView({
	behavior: "smooth",  // 平滑過渡
	block:    "start"  // 上邊框與視窗頂部平齊。默認(rèn)值
});
//要是放在mounted()里執(zhí)行使用
this.$refs.pronbit.scrollIntoView();//不然只執(zhí)行一次刷新了也一樣
//禁止scrollIntoView
this.$refs.pronbit.scrollIntoView(false);

上面介紹使用方法 下面請(qǐng)看效果圖

<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: {
	  //滾動(dòng)指定位置
	  imgus:function(e){
	  	document.getElementById(e).scrollIntoView({
	  	  behavior: "smooth",  // 平滑過渡
	  	  block:    "start"  // 上邊框與視窗頂部平齊。默認(rèn)值
	  	});
	  },
	  // 輪播
	  changePage(current) {
	    console.log('當(dāng)前輪播圖序號(hào)為:' + 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導(dǎo)致元素偏移問題

element.scrollIntoView（）

需要默認(rèn)為true element.scrollIntoView（）等同于element.scrollIntoView(true)

(默認(rèn)值)描述
true元素的頂部將對(duì)齊到可滾動(dòng)祖先的可見區(qū)域的頂部
false元素的底部將與可滾動(dòng)祖先的可見區(qū)域的底部對(duì)齊。

但是

scrollIntoView當(dāng)元素超出可視區(qū)域的時(shí)候就會(huì)出現(xiàn)元素偏移的情況

解決辦法有兩個(gè)

1.修改元素

`height：100%;overflow:auto`

2.

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

這樣會(huì)默認(rèn)跑到頂端但是會(huì)出現(xiàn)一個(gè)問題使得元素的一半出不來

3.最好

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

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論