跳到主要内容
青山指南正在为您准备页面
全国医疗级专业核验
透明收费 · 拒绝隐形每天 08:00-20:00
资讯

点击元素让其滚动到锚点定位scrollIntoView方法

养老服务、照护经验与行业动态,为家庭提供实用参考。

点击元素让其滚动到锚点定位scrollIntoView方法

示例:

点击元素让其滚动到锚点定位scrollIntoView方法

点击右侧的字母,滚动到具体的位置,先给右侧的标题绑定点击事件,拿到点击的元素,在通过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%;
}
咨询顾问返回首页
分享经验

发表评论

读者交流

全部评论

0

还没有评论,欢迎留下第一条讨论。