<div style="display: flex;height: 442px;">
? ? ? ? ? ? ? ? ? ? ? ?<el-tabs v-model="activeTabs" class="zxtabsStyle" tab-position="left" @tab-click="tabshandleClick">
? ? ? ? ? ? ? ? ? ? ? ? <el-tab-pane label="主要致險(xiǎn)情景" name="zxqj"></el-tab-pane>
? ? ? ? ? ? ? ? ? ? ? ? <el-tab-pane label="風(fēng)險(xiǎn)防控基本要求" name="yq"></el-tab-pane>
? ? ? ? ? ? ? ? ? ? ? ? <el-tab-pane label="管理措施" name="glcs"></el-tab-pane>
? ? ? ? ? ? ? ? ? ? ? ?</el-tabs>
? ? ? ? ? ? ? ? ? ? ? ?<div>
?//要切換滾動的內(nèi)容區(qū)域
<div class="con_tab" ref="content">
?? ?<div id="zxqj" class="conBlock">介紹</div>
?? ?<div id="yq" class="conBlock">課程目錄</div>
?? ?<div id="glcs" class="conBlock">課后福利</div>
</div>

mounted(){
//1.mounted里面自動監(jiān)聽滾動事件 ? 代碼如下
this.$refs.content.onscroll = ()=>{
? ? ?this.handleScroll();
?}
},
methods:{
? ? ? ? handleScroll () {
? ? ?let scrollTop = this.$refs.content.scrollTop;
? ? ? let blocks = document.querySelectorAll('.conBlock');
? ? ? blocks.forEach((item, index) => {
? ? ? ? console.log("blocks",item.id)
? ? ? ? ? if (scrollTop >= item.offsetTop) {
? ? ? ? ? ? ? this.activeTabs = item.id;
? ? ? ? ? }
? ? ? })
? },
? ? ? ? ?tabshandleClick(data){
? ? ? ? ? ? console.log("data",data)
? ? ? ? ? ? let index=Number(data.index)
? ? let blocks = document.querySelectorAll('.conBlock');
? ? let step = 40;//滾動步長
? ? let currentScrollTop = this.$refs.content.scrollTop;
? ? let targetOffsetTop = blocks[index].offsetTop;
? ? console.log("currentScrollTop",currentScrollTop);
? ? console.log("targetOffsetTop",targetOffsetTop);
? ? if(currentScrollTop > targetOffsetTop){
? ? ? ? const smoothUp = ()=>{
? ? ? ? ? ? if(currentScrollTop >= targetOffsetTop){
? ? ? ? ? ? ? ? if (currentScrollTop - targetOffsetTop >= step) {
? ? ? ? ? ? ? ? ? ? currentScrollTop -= step;
? ? ? ? ? ? ? ? ? ? setTimeout(smoothUp,1);
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? currentScrollTop = targetOffsetTop-step;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.$refs.content.scrollTop = currentScrollTop;
? ? ? ? ? ? }
? ? ? ? };
? ? ? ? smoothUp();
? ? }else{
? ? ? ? const smoothDown = ()=>{
? ? ? ? ? ? if (currentScrollTop <= targetOffsetTop) {
? ? ? ? ? ? ? ? // 如果和目標(biāo)相差距離大于等于step 就跳 step
? ? ? ? ? ? ? ? if (targetOffsetTop - currentScrollTop >= step) {
? ? ? ? ? ? ? ? ? ? currentScrollTop += step;
? ? ? ? ? ? ? ? ? ? setTimeout(smoothDown,1);
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? // 否則直接跳到目標(biāo)點(diǎn)，防止跳過
? ? ? ? ? ? ? ? ? ? currentScrollTop = targetOffsetTop-step;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.$refs.content.scrollTop = currentScrollTop;
? ? ? ? ? ? }
? ? ? ? };
? ? ? ? smoothDown();
? ? }
},
}

scrollToSection(id) {
? ?let section = document.getElementById(id)
? ?if (section) {
? ? ? section.scrollIntoView()
? ?}
}