【vue】区域元素拖动进行页面滚动

最新推荐文章于 2024-05-22 13:52:22 发布

C_fashionCat

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量1.3k

点赞数 2

分类专栏： js vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/C_fashionCat/article/details/128785913

版权

vue 同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

在一个有滚动条的页面上进行元素滚动时，快速的进行上下的滚动拖动，会比较方便的进行元素拖拽。之前翻阅了各种资料，都是拖动的是整体滚动条，而我当前遇到的是当某一模块的区域有滚动条，这部分区域里面的拖拽元素脱离该块挪到顶部和底部时，该区域的滚动条进行上下滚动。

  // html元素，一个小块元素
  <div class="event-config" ref="eventConfig">
  	<draggable
  		v-model="actions"
        group="action"
        chosenClass="chosen"
        animation="300"
        @start="drag=true"
        @end="drag=false"
  	>
  		<div
          class="action"
          v-for="action in actions"
          :key="action"
          @drag="dragover"
        >
        </div>
  	</draggable>
  </div>

1、获取拖动元素外部的滚动条，不停的寻找，直到找到有滚动条的父元素

  // 获取到有滚动条的元素，进行拖拽时的滚动操作
  getParentAutoScrollElement(el) {
    if (el.clientHeight < el.scrollHeight) {
      return el;
    } else if (el.parentElement) {
      return this.getParentAutoScrollElement(el.parentElement);
    } else {
      return document.body;
    }
  }

2、获取拖拽元素在浏览器中位置，计算距离顶部/底部的高度，小于200px时，进行滚动

  dragover(ev) {
  	// 获取拖拽元素在浏览器中的y坐标，即高度位置
    const disY = ev.clientY;
    // 从拖拽元素的父元素开始找滚动条
    const eventElement = this.$refs.eventConfig as HTMLElement;
    const currentLocation = this.getParentAutoScrollElement(eventElement);
    // 当拖拽的元素距离顶部小于200px时，说明可以进行滚动上移
    if (disY < 200) {
      // 获取当前滚动条的滚动高度
      let top = currentLocation.scrollTop;
      if (top > 0) {
        top -= 5; // 相比上次位置减5
        currentLocation.scrollTo(0, top);
      }
    } else if ((document.body.clientHeight - disY) < 200) {
      // 当拖拽的元素距离底部小于200px时，说明可以进行滚动下移
      // 是否移动到底部
      const scrollHeight = currentLocation.scrollHeight;
      const tabHeight = currentLocation.clientHeight;
      let scrollTop = currentLocation.scrollTop;
      let scrollBottom = scrollHeight - scrollTop - tabHeight;
      if (scrollBottom > 0) {
        scrollTop += 5; // 相比上次位置加5
        currentLocation.scrollTo(0, scrollTop);
      }
    }
  }