ref传最大标签页组件的滚动条监听:
使用ref:
<div style="width: 100%;height: calc(100vh - 96px); overflow-y: auto; border-radius: 4px;"
class="nav"
ref="detailsHeader">
<el-row class="menuNav"
监听DOM滚动条:
mounted () {
const detailsHeader = this.$refs.detailsHeader
detailsHeader.addEventListener('scroll', this.scrollChange, true)
},
html部分:
<el-row style="width: 100%; margin:10px auto ; border-radius: 4px;"
id="menuFlag">
<div class="listUl"
:class="whether ? 'isFixed' : 'listUl'">
<ul style="display: flex;list-style: none;width: 1550;height: 60px;line-height: 60px;margin:auto;padding-left: 122px;">
<li style="margin-right: 50px;cursor: pointer;font-size: 20px;height:60px;line-height: 60px;text-align: center;padding: 0px 20px;"
v-for="(item,index) in title_list"
:key="index"
ref="spans"
:class="activeStep === index ?'liList':''"
@click="jump(index)">
{{item.title}}
</li>
</ul>
</div>
<div class="result scroll-content">
<!-- 标的基本信息 -->
<subjectInformation class="scroll-item"
id="subjectInformation"
:details="details"></subjectInformation>
<!-- 交易条件与受让方资格条件 -->
<transaction class="scroll-item"
id="transaction"
:details="details"></transaction>
<!-- 项目图片 -->
<projectPicture class="scroll-item"
id="projectPicture"
:details="details"></projectPicture>
<!-- 项目附件 -->
<attachments class="scroll-item"
id="attachments"
:details="details"></attachments>
<!-- 标的物位置 -->
<targetPosition class="scroll-item"
id="targetPosition"
:details="details"></targetPosition>
<!-- 出租方信息 -->
<rentalInformation class="scroll-item"
id="rentalInformation"
:details="details"></rentalInformation>
</div>
</el-row>
data部分:
whether: false,
activeStep: 0,
title_list: [
{ title: '标的基本信息', id: "#subjectInformation" },
{ title: '交易条件与受让方资格条件', id: "#transaction" },
{ title: '项目图片', id: "#projectPicture" },
{ title: '项目附件', id: "#attachments" },
{ title: '标的物位置', id: "#targetPosition" },
{ title: '出租方信息', id: "#rentalInformation" },
],
方法:
// 点击切换锚点
jump (index) {
let that = this
this.activeStep = index
// 用 class="step-jump" 添加锚点
let jump = document.querySelectorAll('.scroll-item')
let total = jump[index].offsetTop
// this.$refs.detailsHeader.scrollTop
console.log('纵坐标', total)
// this.$emit('viewScroll', total)
// let distance = this.$refs.detailsHeader.offsetTop
if (this.whether == false) {
this.$refs.detailsHeader.scrollTop = total + 534
} else {
this.$refs.detailsHeader.scrollTop = total + 600
}
},
scrollChange (e) {
console.log(e)
let scrollItems = document.querySelectorAll(".scroll-item");
let offsetTop = document.querySelector('.menuNav').offsetTop;
let offsteWidth = document.querySelector('.menuNav').scrollWidth
console.log(document.querySelector(".listUl").scrollWidth)
let mun = offsetTop + 554
this.whether = e.target.scrollTop > mun;
console.log(e.target.scrollTop)
if (e.target.scrollTop > mun) {
this.whether = true
document.querySelector('.listUl').style.width = offsteWidth + "px"
} else {
this.whether = false
}
for (let i = scrollItems.length - 1; i >= 0; i--) {
// 判断滚动条滚动距离是否大于当前滚动项可滚动距离
let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop + 584;
if (judge) {
if (e.target.scrollTop + e.target.offsetHeight === e.target.scrollHeight) {
this.activeStep = scrollItems.length - 1
} else {
this.activeStep = i;
}
break;
}
}
},
样式:
.isFixed {
position: fixed;
top: 106px;
font-size: 20px;
margin: auto;
background-color: #fff;
border-radius: 4px;
z-index: 1000;
}
.liList {
color: #409eff;
border-bottom: 4px solid #409eff;
}
.listUl {
width: 100%;
margin: 0 auto 10px;
background-color: #ffffff;
border-radius: 4px;
font-size: 20px;
}