分类联动布局页面

 <div class="select-car">

            <div class="select-A">

                <div class="select-item" :id="item.item+'1'" v-for="(item,index) in EnglishBrand" :key="index" :class="{active:EngActive==item.item}" @click="modifyEnglish(item.item,$event)"><a @click="stopEvent" :href="'#'+item.item">{{item.item}}</a></div>

                <!-- <div class="select-item" v-for="(item,index) in EnglishBrand" :key="index" :class="{active:EngActive==item.item}" @click="modifyEnglish(item.item)">{{item.item}}</div> -->

            </div>

            <div class="select-B" @scroll="scrollBrand">

                <div v-for="(brand,index) in EnglishBrand" :key="index" :id="brand.item" class="select-div">

                    <div class="select-B-item">{{brand.item}}</div>

                    <ul>

                        <li class="select-brand" v-for="(ite,ind) in brand.list" :key="ind" @click="addTab(ite)">{{ite}}</li>

                    </ul>

                </div>

                <div class="space"></div>

            </div>

        </div>

data   EnglishBrand:[]

methods:{

        // 阻止默认行为

        stopEvent(event){

            event.preventDefault()

        },

        // 点击左侧菜单栏跳转到相应的区域

        modifyEnglish(data,event){

            this.EngActive = data

            let selectB = document.querySelector(".select-B")

            let brandDom = document.getElementById(data)

            let toToParent = brandDom.offsetTop - selectB.offsetTop

            if(toToParent!=0){

                selectB.scrollTop = toToParent

            }  

        },

        // 滚动时左边的菜单栏也滚动

        scrollBrand(){

            let selectB = document.querySelector(".select-B")

            let toToParent = []

            let EngID = []

            for(let i = 0; i<selectB.children.length;i++){

                 toToParent[i] = selectB.children[i].offsetTop - selectB.offsetTop

                 EngID[i] = selectB.children[i].id

                 

            }  

            for(let j = 0;j< toToParent.length;j++){

                if(selectB.scrollTop>=toToParent[j]&&selectB.scrollTop<toToParent[j+1]){

                    let DomItem = document.getElementById(EngID[j]+'1')

                    DomItem.classList.add('active')

                    let selectDiv = document.querySelectorAll(".select-item")

                    for(let k = 0;k<selectDiv.length;k++){

                        if(selectDiv[k].id!=DomItem.id){

                        selectDiv[k].classList.remove('active')

                        }

                    }

                }

            }

        }

    }