VUE-滚动条scroll事件，滚动定位

功能简介：

1、左边绿色显示内容简介，右边粉色显示每项的详情；

2、点击A项，出现对号图片，同时右侧内容为A的详情；

3、继续点击B，图片下滑到B项的中间位置，右边显示B详情，以此类推；

4、滚动时，图片消失；

5、滚动后，再次点击C，图片出现在C的右侧中间，右边显示C详情；

关键点：

1、给滚动条注册监听事件，用于获取滚动条的位置；

mounted() {this.showArrow(this.list[0],0)//可以在这里面直接进行滚动条的获取window.addEventListener('scroll', this.handleScroll, true);
},

this.$refs.contentbox.scrollTop;用于获取滚动条滚动的距离

handleScroll() {var scrollT = this.$refs.contentbox.scrollTop;this.scrollY = scrollT;this.flag = false;},

2、图片position：absolute;关键是点击和滚动时，如何设置图片的top

图片的top=点击项的位移offsetTop-滚动距离scrollTop+图片中间位置纠偏

showArrow(item,index){var newObj={};newObj.title=item.title;newObj.content=item.content;this.detail=newObj;//当前项的位移var current=this.$refs[`list${index}`][0].offsetTop;var newT=current-this.scrollY+73;this.flag=true;this.$refs.arrow.style.top=newT+'px';},

3、全部源码


<!DOCTYPE html>
<html add="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 1. 导入Vue包 --><script src="./lib/vue-2.4.0.js"></script><style>#app>div {float: left;width: 400px;height: 800px;margin-top: 100px;}.frame {background: yellow;position: relative;}.contentbox {width: 100%;height: 100%;overflow-x: hidden;overflow-y: scroll;}.item {width: 400px;height: 200px;background: green;position: relative;border: 1px solid blue;text-align: center;}.arrow {position: absolute;left: 400px;top: 0px;background: url("../1.png") no-repeat;width: 54px;height: 54px;transition: all .5s linear;}.other {background: pink;text-align: center;}</style>
</head><body><!-- 2. 创建一个要控制的区域 --><div id="app"><div class="frame" ref="frame"><div class="arrow" v-show="flag" ref="arrow"></div><div class="contentbox" ref="contentbox"><div class="item" v-for="(item,i) in list" :key="item.id" @click="showArrow(item,i)" :ref="`list${i}`"><div class="title">{{item.title}}</div><div class="content">{{item.content}}</div></div></div></div><div class="other"><div class="title">{{detail.title}}</div><div class="content">{{detail.content}}</div></div></div><script>var vm = new Vue({el: '#app',data: {list: [{ id: '1', title: '标题1', content: '内容1' },{ id: '2', title: '标题2', content: '内容2' },{ id: '3', title: '标题3', content: '内容3' },{ id: '4', title: '标题4', content: '内容4' },{ id: '5', title: '标题5', content: '内容5' },{ id: '6', title: '标题6', content: '内容6' }],detail:{},scrollY: 0,currentP:0,flag: true,},mounted() {this.showArrow(this.list[0],0)//可以在这里面直接进行滚动条的获取window.addEventListener('scroll', this.handleScroll, true);},methods: {handleScroll() {// debugger// this.$refs.contentbox// scrollHeight: 1212 scrollLeft: 0 scrollTop: 1 scrollWidth: 402var scrollL = this.$refs.contentbox.scrollLeft;var scrollT = this.$refs.contentbox.scrollTop;var scrollW = this.$refs.contentbox.scrollWidth;var scrollH = this.$refs.contentbox.scrollHeight;this.scrollY = scrollT;this.flag = false;},showArrow(item,index){var newObj={};newObj.title=item.title;newObj.content=item.content;this.detail=newObj;var current=this.$refs[`list${index}`][0].offsetTop;var newT=current-this.scrollY+73;this.flag=true;this.$refs.arrow.style.top=newT+'px';},}})</script>
</body>
</html>

VUE-滚动条scroll事件，滚动定位相关推荐

php滚动加载分页,jQuery scroll事件实现监控滚动条分页实例详解
这篇文章主要介绍了jQuery scroll事件实现监控滚动条分页简单示例,使用ajax加载,同时介绍了(document).height()与$(window).height()的区别,需要的朋友可 ...
vue 监听页面滚动事件：触发animate.min.css动画特效
一.问题答疑: 1. animate.css 如何在vue项目中引入?或引用? 2. 如何监听滚动事件,触发animate.class动画播放? vue 监听滚轮滚动事件,for循环 ,动态id,代码 ...
html页面滚动条监听事件,滚动条的scroll事件
在vb中,滚动条的scroll 事件和change 事件的区别scroll和change的区别为:指代不同.用法不同.侧重点不同一.指代不同 scroll:滚屏,滚动. change:变更,变革. ...
vue watch 修改滚动条_vue实现滚动监听，点击瞄点平滑滚动，控制内嵌滚动条滚动...
滚动效果当页面滑动时,左边导航栏会自动定位到当前标题,一级标题展开,二级标题的字体变红色,字体前面有一个小图标. 上图........... Html代码 {{NItem1.ordered}} {{ ...
scroll事件实现监控滚动条并分页显示示例（zepto.js）
scroll事件实现监控滚动条并分页显示示例(zepto.js ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...
html 滚动条停止事件,CSS scroll-snap滚动事件停止及元素位置检测实现
一.Scroll Snap是前端必备技能 CSS Scroll Snap是个非常好用的特性,可以让网页容器滚动停止的时候,无需任何JS代码的参与,浏览器可以自动平滑定位到指定元素的指定位置.类似幻灯片 ...
vue 固定div 滚动_vue.js-div滚动条隐藏但有滚动效果的实现方法
组件被包在一个高度固定的div mounted () { var boDiv = document.getElementById(this.id); if(boDiv == undefined){ r ...
js：Vue.js自定义指令实现scroll下滑滚动翻页
Vue.js自定义指令实现scroll下滑滚动翻页核心代码 import Vue from 'vue'// v-scroll Vue.directive('scroll', {bind(el, bi ...
vue滚动条禁止_js禁止和开启滚动条事件
开发移动端页面的时候有一个很比较常见的需求,在出现弹窗时,禁止滑动弹窗后面的主体页面.如何实现呢,往下看 js实现整个页面禁止滚动:document.body.addEventListener('to ...
vue+element 实现点击左侧树形控件实现右侧滚动定位
树形控件实现定位+平滑滚动(左树形右内容) vue+element 实现点击左侧树形控件实现右侧滚动定位具体实现代码如下: <template><div class="d ...

VUE-滚动条scroll事件，滚动定位

VUE-滚动条scroll事件，滚动定位相关推荐

最新文章

热门文章