VUE3监听div滚动,滚动超出后折叠collapse组件


先上效果:

页面顶部有一个折叠组件 collapse,需求是内容滚动的时候希望能够自动折叠collapse。

实现如下:

在滚动组件div中,增加scrol事件 @scroll="handleScrol"

VUE3监听div滚动,滚动超出后折叠collapse组件

添加防抖引用

JavaScript 全选
import { debounce } from 'lodash'

滚动判断逻辑实现

C# 全选
// 开始滚动的位置
const startDistanceFromBottom = ref(0)

// 300毫秒防抖,如果300毫秒滑动距离超过了100px,就执行
const autoCollapse = debounce((event) => {
  const { scrollTop, clientHeight, scrollHeight } = event.target;
  const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
  console.log('distanceFromBottom == ', distanceFromBottom)
  console.log('startDistanceFromBottom == ', startDistanceFromBottom.value)
  if (Math.abs(distanceFromBottom - startDistanceFromBottom.value) >= 100) {
    // 执行操作,折叠条件colapse
    collapseValue.value.splice(0, collapseValue.value.length)
  }
  startDistanceFromBottom.value = 0
}, 300)

// 监听div滚动时间
const handleScrol = (event) => {
  const { scrollTop, clientHeight, scrollHeight } = event.target;
  if (startDistanceFromBottom.value == 0) {
    const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
    startDistanceFromBottom.value = distanceFromBottom
    console.log(startDistanceFromBottom.value)
    console.log(distanceFromBottom)
    autoCollapse(event)
  }
}

没300毫秒为一个时间节点,如果300毫秒内滚动距离超过了100px,就折叠查询条件collapse,如果滚动没有超过100px,就不折叠\

 

 

 

 

 

 

版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
张国生
上一篇:vue3 ts setup 封装element-plus el-dialog,并使用v-model
下一篇:vant4文档官网
评论列表

发表评论

评论内容
昵称:
关联文章

VUE3监听div滚动滚动超出折叠collapse
vue3重新封装element-plus库的按钮组件el-button
element-uiel-tabs控制内容滚动
vue3+ts 导出类型
VUE3版本 页面切换数据丢失问题
vue3 keep-alive跳转回来 scroll位置丢失
vue3使用ts开发自定义,对外开放方法
vue3+vist 打包空白
vue3 ts setup 封装element-plus el-dialog,并使用v-model
DevExpress 历史各版本下载地址【更新:V21.1.5】
CSS样式:div文本超出用...表示 div不换行
winformOpenFileDialog控Filter属性设置
Bootstrap 弹窗JS封装
VUE Cli3项目添加LESS支持
JS合并两个数3种方法详解
Tinymce编辑器加载默认为P元素,修改为DIV
Devexpress GridControl删除控中多余无效的ColumnEdit
Vue 3 中,嵌套数据源且需要过滤内部数据源
JOC快速开发平台,增加调试监听功能
vue3 + ts环境中props配置自定义类型

联系我们
联系电话:15090125178(微信同号)
电子邮箱:garson_zhang@163.com
站长微信二维码
微信二维码