Vue监听滚动实现锚点定位(双向)

2023-10-27

这里很感谢 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
      },

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue监听滚动实现锚点定位(双向) 的相关文章

随机推荐