但是我和他不同，⽹上的⽅法都是 这样计算滚动条距离窗⼝顶部的距离，注意是窗⼝，⽤的是document对象 // Chrome
document.body.scrollTop
// Firefox
document.documentElement.scrollTop
// Safari
window.pageYOffset
我这项⽬就⽆法正常这样使⽤了，⾸先我们vue项⽬有个总页⾯layout组件，左侧分 menu组件，最上⽅fixed了两块div，最后加上content页⾯内容给⽤户看的主界⾯，所有的页⾯都是这样渲染进layout__content⾥的 这就导致⽆法使⽤document对象来获取滚动条⾼度 我调试发现，页⾯在某⼀块 上有css，滚动条就在这上⾯，所以，我这⾥使⽤的@scroll⽅法，
注意是@scroll ⽽不是scroll.native，
handleScroll (el) {
this.scrollTop = this.$t.scrollTop
},
this.$t.scrollTop 打印出来就是滚动条距离页⾯的距离
scrollTop 这个data属性，我通过props将其传到了⼦组件zhong，通过页⾯共同的⼊⼝router-view导⼊
当然这就将这个属性，所有页⾯都能接收到了，感觉不是很好，暂且先这样实现
回到我本⾝的展⽰页⾯，⼦组件 监听scrollTop
props: ['scrollTop'],
watch: {
scrollTop (val) {凝胶珠
this.pageTop = val
}
},
这⾥的pageTop 我这⾥做了⼀下赋值，因为尽量别直接在⼦组件改变props的值
this.$nextTick(() => {
this.pageTop = this.scrollTop
})
},
onScroll () {
let _article = document.querySelectorAll('.step-jump')
_article.forEach((item, index) => {
闸道机
if (this.scrollTop >= item.offsetTop) {
this.activeStep = index
}
})
},
监听⿏标滚动事件，这样就可以实现了，当然我的页⾯html是这样的情况，以各个⼩组件拼接起来，夹杂着⽤来定位的相同class的div元素
<div class="step-jump"></div>
<md-adminttance></md-adminttance>螺旋伞齿轮
<div class="step-jump"></div>
<md-supper-chain></md-supper-chain>
<div class="step-jump"></div>
<md-trade></md-trade>彩印业务
<div class="step-jump"></div>
<md-applicant></md-applicant>
<div class="step-jump"></div>
<md-contract></md-contract>
<div class="step-jump"></div>usb flash
<md-blacklist></md-blacklist>
现在来看⼀下step元素，如果你需要⽤到⾃定义的icon，需要加上这个属性，源码通过是否传⼊这个来判断是 icon 还是text
<el-steps
direction="vertical"
finish-status="wait"
:active="activeStep">
<el-step
v-for="(item, index) in steps"
:key="index"
icon=" "
:title="item.title"
@click.native="jump(index)">
<dl-icon slot="icon" :type="index === 0 ? 'yinzhang' : 'shixinyuan'"
:color="index === 0 ? '#383636' : '#BEC0C2'" size="0.5"></dl-icon>
</el-step>
</el-steps>
点击事件⽅法 jump
let that = this
this.activeStep = index
// ⽤ class="step-jump" 添加锚点
let jump = document.querySelectorAll('.step-jump')
let total = jump[index].offsetTop
console.log('纵坐标', total)
// this.$emit('viewScroll', total)
let distance = this.pageTop
// 平滑滚动，时长500ms，每10ms⼀跳，共50跳
let step = total / 50 >> 0
console.log(step, '222')
if (total > distance) {
smoothDown()
} else {
let newTotal = distance - total
step = newTotal / 50 >> 0
smoothUp()
}
function smoothDown () {
if (distance < total) {
distance += step
that.$emit('viewScroll', distance)
setTimeout(smoothDown, 10)
} else {
that.$emit('viewScroll', total)
}
光纤调整架
}
function smoothUp () {
if (distance > total) {
distance -= step
that.$emit('viewScroll', distance)
setTimeout(smoothUp, 10)
} else {
that.$emit('viewScroll', total)
}
}
},
这⾥就是借鉴了⽹友的想法，每⼀⼩段⼀⼩段的跳，这样会导致视觉上是⼀个平滑的效果，⽽不是我点击了就突然scrollTop就突然下去或者上来，避免了很突兀的感觉。
有什么问题或建议，请直接提出来，谢谢哟
完善⼀下上⾯的代码，将多次emit事件删除，直接写⼊到⽗组件中来判断
其实上⾯这种实现还是有很⼤⽔分的，如果滚动条是相对于浏览器窗⼝的，其实直接document对象 判断scrollTop即可，另写⼀篇⽂章来重新书写vue scroll平滑滚动！最新的优化 可以看这个 ==========>>>>>>
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议