专业做影评的网站网站建设 合同

有个变态的需求，要求tabs左侧固定，右侧是表格，点击左侧tab，右侧表格滚动到指定位置，同时，右侧滚动的时候，左侧tab高亮相应的item

上图

右侧的高度非常高，内容非常多

常规的瞄点不适用，因为右侧只有一个div(table表格)

目前采用的是监听滚动，但是也有问题，不同的浏览器，屏幕的高度是不一样的，也有适配问题

上代码

mounted() {window.addEventListener('scroll', this.scroll, true)},// method
scroll (e) {const scrollTop = [298, 730, 766, 1162, 1702, 2098, 2242, 2638, 2854, 3711]console.log(window.scrollY)// 获取元素对屏幕上边的距离if(this.$refs.tabsRef && this.$refs.tabsRef.$el){if(window.scrollY > 100){this.$refs.tabsRef.$el.style.paddingTop = window.scrollY - 180 + `px`}else{this.$refs.tabsRef.$el.style.paddingTop = window.scrollY + `px`}}for(let i=0; i<9; i++){this.$refs['tabPaneRef' + i].style.color = "#303133"}for(let i=0; i<9; i++){if(window.scrollY <= scrollTop[0]){this.$refs['tabPaneRef' + 0].style.color = "#13C2C2"document.getElementsByClassName("el-tabs__active-bar")[0].style.transform = "translateY(0px)";break;}else if(window.scrollY > scrollTop[8]){this.$refs['tabPaneRef' + 8].style.color = "#13C2C2"document.getElementsByClassName("el-tabs__active-bar")[0].style.transform = "translateY(320px)";break;}else if(scrollTop[i] <= window.scrollY && window.scrollY < scrollTop[i+1]){this.$refs['tabPaneRef' + i].style.color = "#13C2C2"document.getElementsByClassName("el-tabs__active-bar")[0].style.transform = "translateY(" +  i * 40 + "px)";break;}}},scrollToBottom(e){if(this.dataSource.length){const { tabs } = this.getFormMap(formKayMap) || { tabs: [] };let index = 0;tabs.forEach((element, i) => {if(element.tab === e.target.outerText){index = i;}});const scrolls = [0, 12, 13, 24, 39, 50, 54, 65, 71]document.getElementsByClassName("el-table__row")[scrolls[index]].scrollIntoView();}},// elementrender() {const { tabs } = this.getFormMap(formKayMap) || { tabs: [] };return (<div class='warp' ref="myContent"><div class='header'>{this.formArr.map((form, idx) => {return (<div class='form-item'><el-row class='row'><el-col span={2} class="p-b-10">{idx == 0 ? "当前所选" : `目标${idx}`}</el-col><el-col span={22}><TaskQurey search={false} ref={`taskQurey${idx}`} origin={idx == 0 ? this.origin : undefined}>{this.formArr.length > 2 && idx !=0 && (<template slot='footer'><i class='el-icon-delete' onClick={() => this.del(idx)}></i></template>)}</TaskQurey></el-col></el-row></div>);})}<div class='btns'><el-button size='small' onClick={this.add} type='success'>新增对比条件</el-button><el-button size='small' onClick={this.compare} type='primary'>开始对比</el-button><el-button size='small' onClick={this.export} type='warning'>导出对比数据</el-button></div></div><div class='content flex' id="myDiv"><el-tabs tab-position="left" ref="tabsRef" class="eltabs">{tabs.map((item, index) => {return (<el-tab-pane><template slot="label"><div ref={`tabPaneRef${index}`} class="custom-tabs-label" onClick={this.scrollToBottom}><div>{item.tab}</div></div></template></el-tab-pane>)})}</el-tabs><el-table ref="tableRef" rowKey='id' defaultExpandAll treeProps={{ children: "children" }} size='mini' border data={this.dataSource}>{this.column.map(item => {return (<el-table-columnprop={item.prop}label={item.label}align={item.prop == "title" ? "" : "center"}scopedSlots={{default: ({ row }) => {return (<span>{item.prop == "tip" ? <span class={/50/.test(row[item.prop]) ? "red" : "orange"}>{row[item.prop]}</span> : row[item.prop]}</span>);}}}/>);})}</el-table></div></div>);}