«

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

时间:2023-7-30 10:44     作者:小诸葛     分类: Vue     正在检查是否收录...


示例:

点击元素让其滚动到锚点定位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%;
}

scrollIntoView 页面滚动

推荐阅读:


扫描二维码,在手机上阅读