点击元素让其滚动到锚点定位scrollIntoView方法
时间:2023-7-30 10:44 作者:小诸葛 分类: Vue 正在检查是否收录...
示例:
点击右侧的字母,滚动到具体的位置,先给右侧的标题绑定点击事件,拿到点击的元素,在通过scrollIntoView方法进行滚动
{ behavior: "smooth" }是平滑滚动属性
<div class="aside">
<ul>
<li @click="clickAZ(item)" v-for="(index, item) in abclist.list" :key="item">{{ item }}</li>
</ul>
</div>
<div class="bscroll">
<ul class="index">
<li v-for="(index, item) in abclist.list" :key="item">
<h2 :id="item">{{ item }}</h2>
<div class="span">
<span :class="{ 'active': datalist.cityname == item }" @click="span(item)" v-for="(item, v) in index"
:key="v">
{{ item }}</span>
</div>
</li>
</ul>
</div>
JS
let clickAZ = (key) => {
console.log(key);
let element = document.getElementById(key);
element.scrollIntoView({ behavior: "smooth" });
}
CSS
body,html{
height: 100%;
}
.bscroll {
height: 100%;
overflow: scroll;
}
.index{
height: 100%;
}
版权所有:微6g
文章标题:点击元素让其滚动到锚点定位scrollIntoView方法
文章链接:https://www.v6g.cn/128.html
本站文章均为原创,未经授权请勿用于任何商业用途
文章标题:点击元素让其滚动到锚点定位scrollIntoView方法
文章链接:https://www.v6g.cn/128.html
本站文章均为原创,未经授权请勿用于任何商业用途
推荐阅读:
扫描二维码,在手机上阅读