scrollIntoView()實現通信錄功能-錨點定位

錨點定位算是一個很熟悉的功能了，之前都是使用a標籤的href=#XXX來實現，以下：

可是這種方法地址欄會變化，會給人一種誤覺得頁面刷新的錯覺，若是須要進行地址欄的操做，還得加一些判斷，比較麻煩，因此採用了一種新的方式來進行錨點定位，就是scrollIntoView

如下爲使用scrollIntoView實現的通信錄功能的錨點定位

思路：

須要被定位的元素添加id，使用document.getElementById或者querySelector來得到元素，而後點出來scrollIntoView( )方法

粗略效果圖：

具體代碼

<template>    
    <div class="test clear">        
        <div class="left-letter">            
            <span 
                v-for="(letter,letterIndex) in letterList" 
                :key="letterIndex" 
                @click="toLetters(letter)">{{letter}}
            </span>        
        </div>        
        <ul class="student-container">            
            <li v-for="(student, stIndex) in studentInfo" :key="stIndex">                
                <span :class="{'spell-letter': true, 'selected': student.spell.toUpperCase().slice(0, 1) === selectLetter}" :id="student.spell.toUpperCase().slice(0, 1)" v-if="stIndex===0 || studentInfo[stIndex].spell.toUpperCase().slice(0, 1) !== studentInfo[stIndex - 1].spell.toUpperCase().slice(0, 1)">{{student.spell.toUpperCase().slice(0, 1)}}</span>                
                <div>                    
                    <var>{{student.name}}</var>                    
                    <var>{{student.number}}</var>                
                </div>            
            </li>        
        </ul>    
    </div>
</template>
<script>
    export default {    
        name: 'test',    
        data(){        
            return {            
                studentInfo: [                
                    {                    
                        name: '白芸維',                    
                        spell: 'baiyunwei',                    
                        number: '001'                
                    },                
                    {                    
                        name: '柏楠',                    
                        spell: 'bonan',                    
                        number: '002'                
                    },                
                    {                    
                        name: '陳建熹',                    
                        spell: 'chenjianxi',                    
                        number: '003'                
                    },                
                    {                    
                        name: '陳天佑',                    
                        spell: 'chentianyou',                    
                        number: '004'                
                    },                
                    {                    
                        name: '東西',                    
                        spell: 'dongxi',                    
                        number: '008'                
                    },                
                    {                    
                        name: '桂怡',                    
                        spell: 'guiyi',                    
                        number: '005'                
                    },                
                    {                    
                        name: '黃英',                    
                        spell: 'huangyin',                    
                        number: '009'                
                    },                
                    {                    
                        name: '黃小',                    
                        spell: 'huangxiao',                    
                        number: '0010'                
                    },                
                    {                    
                        name: '黃決賽',                    
                        spell: 'huangjuesai',                    
                        number: '0011'                
                    },                
                    {                    
                        name: '黃英里',                    
                        spell: 'huangyinli',                    
                        number: '0012'                
                    },                
                    {                    
                        name: '雪梨',                    
                        spell: 'xueli',                    
                        number: '0013'                
                    },                
                    {                    
                        name: '楊穎',                    
                        spell: 'yangyin',                    
                        number: '006'                
                    },                
                    {                    
                        name: '曾志偉',                    
                        spell: 'zengzhiwei',                    
                        number: '007'                
                    },            
                ], //學生信息列表            
                letterList: [], //字母列表            
                selectLetter: '', //被選中的字母        
            }    
        },    
        created() {        
            // 初始化字母列表        
            this.studentInfo.forEach((e, index)=>{   
                //過濾字母，重複的不選         
                if (index === 0) {                
                    this.letterList[0] = e.spell.toUpperCase().slice(0, 1)                
                    this.selectLetter = this.letterList[0]            
                } else if (index != 0 && this.studentInfo[index].spell.toUpperCase().slice(0, 1) !== this.studentInfo[index - 1].spell.toUpperCase().slice(0, 1)) {                
                    this.letterList.push(e.spell.toUpperCase().slice(0, 1))            
                }        
            })    
        },    
        methods: {        
            // 點擊左側字母，右側學生列表滾動到指定位置        
            toLetters(letter) {            
                this.selectLetter = letter            
                let e = document.getElementById(letter)            
                if (e) {                
                    e.scrollIntoView() //滾動到指定位置            
                }        
            }    
        }
    }
</script>
<style lang="less" scoped>    
    .test {        
        width: 1200px;        
        margin: 20px auto 0;        
        .left-letter {            
            position: fixed;            
            top: 228px;            
            left: 78px;            
            width: 20px;            
            border: 1px solid #d8d8d8; 
            background: #f9f9f9; 
            span {                
                display: block;                
                width: 100%;                
                height: 30px;                
                text-align: center;                
                line-height: 30px;                
                cursor: pointer;            
            }            
            span:hover {                
                background: #d0e8ed; 
                color: #0d858e; 
            }        
        }        
        .student-container {            
            position: relative;            
            float: left;            
            width: 200px;            
            margin-left: 100px;            
            // border: 1px solid #d8d8d8; 
            li {                
                padding: 0 10px;                
                    span {                    
                        position: absolute;                    
                        color: #999; 
                        font-weight: bold;                
                    }                
                    span.selected {                    
                        color: #0d858e; 
                    }                
                    div {                    
                        padding: 10px 10px 0;                    
                        margin-left: 30px;                    
                        border: 1px solid #d8d8d8; 
                        var {                        
                            display: block;                        
                            margin-bottom: 10px;                    
                        }                
                    }            
            }        
        }    
    }
</style>複製代碼

scrollIntoView是js的原生方法，因此 須要document.getElementById或者querySelector來得到元素，而後才能夠點出來scrollIntoView( )方法

scrollIntoView的默認值爲true：

element.scrollIntoView() 
= element.scrollIntoView(true) 
= element.scrollIntoView({block:'start',inline:'nearest'})複製代碼

element.scrollIntoView(false) = element.scrollIntoView({block:'end',inline:'nearest'})複製代碼

scrollIntoView可選：

behavior定義動畫：'auto' | 'instant' | 'smooth'

block定義滾動位置： 'start' | 'center' | 'end' | 'nearest'

inline： 'start' | 'center' | 'end' | 'nearest'

參考：

developer.mozilla.org/zh-CN/docs/…