Vue监听滚动实现锚点定位（双向） - shentibeitaokong的博客 - CSDN博客

安宇雨 - 随手采集
2018-11-21 15:55:36
随手采集
0000-未整理-等待研究

这里很感谢 http://www.jb51.net/article/110325.htm 这篇文章带来的启发

但是我和他不同，网上的方法都是这样计算滚动条距离窗口顶部的距离，注意是窗口，用的是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.$refs.content.scrollTop
      },

 this.$refs.content.scrollTop 打印出来就是滚动条距离页面的距离

scrollTop  这个data属性，我通过props将其传到了子组件zhong，通过页面共同的入口router-view导入

当然这就将这个属性，所有页面都能接收到了，感觉不是很好，暂且先这样实现

回到我本身的展示页面，子组件监听scrollTop

props: ['scrollTop'],
watch: {
  scrollTop (val) {
    this.onScroll()
    this.pageTop = val
  }
},

这里的pageTop 我这里做了一下赋值，因为尽量别直接在子组件改变props的值

created () {
  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>
<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

  jump (index) {
        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平滑滚动！_最新的优化 _可以看这个 ==========>>>>>>

https://blog.csdn.net/shentibeitaokong/article/details/81349819

Original url: Access
Created at: 2018-11-21 15:55:35
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论