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

功能简介：1、左边绿色显示内容简介，右边粉色显示每项的详情；2、点击A项，出现对号图片，同时右侧内容为A的详情；3、继续点击B，图片下滑到B项的中间位置，右边显示B详情，以此类推；4、滚动时，图片消失；5、滚动后，再次点击C，图片出现在C的右侧中间，右边显示C详情；关键点：1、给滚动条注册监听事件，用于获取滚动条的位置；mounted() {...

佛佛ง

9080人浏览 · 2019-06-12 13:35:54

佛佛ง · 2019-06-12 13:35:54 发布

功能简介：

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: 402
          var 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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^