页面
HTML部分
大盒子包裹所有小盒子
<div class="home_classification w" ref="home_classification">
<classification :obj="obj" v-for="(obj, index) in classificationTree"
:class="'socroll_'+obj.id" :ref="'socroll_'+obj.id" :key="obj.id"
:isLogin="isLogin" />
</div>
JS部分
computed: {
// 侧边栏
refClassification () {
return this.$refs.home_classification
}
},
mounted () {
this.rightTopBox()
},
// mounted 下调用
rightTopBox () {
// 调用方法得到该elDOM元素是否处于可视区域
let observer = new IntersectionObserver(([{ isIntersecting }]) => {
this.classificationShow = isIntersecting
})
observer.observe(this.refClassification) // 调用方法
},
// 点击侧边栏
rightSocroll (domHtml) {
const socrollBox = document.querySelector(`.${domHtml}`)
socrollBox.scrollIntoView({ behavior: "smooth" })
}
使用方法