vue监听滚动条位置 并且使滚动条到指定位置

首先向页面添加滚动事件，可以实时获取到滚动条的位置

methods: {//滚动事件handleScroll() {var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;var offsetTop = document.querySelector('#tabbarBox').offsetTop // 获取所需元素到文档顶部的距离，然后判断滚动条位置让该元素是否固定定位// console.log(scrollTop,offsetTop)if (scrollTop > offsetTop) {this.tabbarBoxFixed = true} else {this.tabbarBoxFixed = false}},},mounted() {// 向页面添加股东事件window.addEventListener('scroll', this.handleScroll, true);},destroyed() {//离开这个界面之后，删除滚动事件，不然容易除bugwindow.removeEventListener('scroll', this.handleScroll)},

然后使用scrollIntoView方法可以跳转到指定元素的位置

methods: {changeTab(num) {if (num == 1) {document.getElementById('js-lipei').scrollIntoView({block: 'start',behavior: 'smooth' // 代表平滑滚动});}else if (num ==2) {document.getElementById('product').scrollIntoView();}else {document.getElementById('form').scrollIntoView();}}}}```下面展示一些备注 。```javascript有时候是想监听局部页面的滚动，可以使用@scroll事件<ul class="rightMenu" @scroll="scroll"></ul> // 给需要的监听的区域增加滚动事件// 左侧点击分类selected(index) {// this.leftIndex = index;this.$el.querySelector(`#id${index}`).scrollIntoView({behavior: "smooth", // 平滑过渡block: "start" // 上边框与视窗顶部平齐。默认值});},