不知道为啥,我试了下,只有scrollIntoView生效,并且虽然是滚动了,但是滚动的位置不对,其他的都没生效。。。有空再研究下

2024年3月18日19:50:37
后续问题解决了,原来我之前id都设置在最外层的div上,导致滚动出现异常,后面换了个思路,id设置在div里面的一个小组件上,这样滚动到这个组件不就相当于整个div滚动出现了吗。问题就解决了,用.scrollIntoView()方法最方便

原文:https://blog.csdn.net/qq_34241004/article/details/118692837

方法一:锚点
//dom
<a href="#li50">跳到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';

方法二: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;
},

方法三:scrollTo
link() {
    let target = document.getElementById('li30');
    let parent = document.getElementById('ul');
    // parent.scrollTop = target.offsetTop - parent.offsetTop;
    parent.scrollTo(0, target.offsetTop - parent.offsetTop);
},
this.$refs.ul.scrollTo(0, 300);

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

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐