1、设置需要滚动的盒子 首先要有滚动条 overflow-y:auto 或overflow-y: scroll; 然后设置 事件@scroll="scrollEvent" 方法名自己定义

<div class="innerBox" @scroll="scrollEvent"><div class="item" @click.stop="onTarget(item.custName)" v-for = "item in NewItems">{{item.custName}}</div>
</div>

2、写入方法 判断是否 到达底部

//滚动条触发事件
scrollEvent(e) {console.log(e)if (e.srcElement.scrollTop + e.srcElement.clientHeight == e.srcElement.scrollHeight ) {console.log("嘿嘿我在底部触发了")}
},

转自:https://www.cnblogs.com/qq976864507/p/13862569.html

vue滚动条滚到到底部触发的方法相关推荐

  1. js实现判断滚动条滚到页面底部并执行事件的方法

    这里我主要介绍JS实现判断滚动条滚到页面底部并执行事件的方法: 需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个 ...

  2. java 滚动条的事件_[Java教程]jquery如何判断滚动条滚到页面底部并执行事件

    [Java教程]jquery如何判断滚动条滚到页面底部并执行事件 0 2016-04-27 10:00:13 本文章向码农介绍jquery如何判断滚动条滚到页面底部并执行事件.首先理解三个dom元素, ...

  3. vue的div滚动条自动到底部_vue 每次渲染完页面后div的滚动条保持在最底部的方法...

    下面我就为大家分享一篇vue 每次渲染完页面后p的滚动条保持在最底部的方法,具有很好的参考价值,希望对大家有所帮助. 实例如下: //每次页面渲染完之后滚动条在最底部updated:function( ...

  4. php滚动条怎么用,如何让滚动条自动滚到最底部

    让滚动条自动滚到最底部的方法:首先在DIV的底部添加一隐藏元素"element":然后调用"element.scrollIntoView()"方法:最后使元素滚 ...

  5. vue底部选择器_vue实现动态显示与隐藏底部导航的方法分析

    vue实现动态显示与隐藏底部导航的方法分析 本文实例讲述了vue实现动态显示与隐藏底部导航的方法.分享给大家供大家参考,具体如下: 在日常项目中,总有几个页面是要用到底部导航的,总有那么些个页面,是不 ...

  6. vue 加载页面时触发时间_5.6 vue更新数组时触发视图更新的方法,熟记JavaScript原生方法...

    问题:vue更新数组时触发视图更新的方法 变异方法: Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.什么是变异方法呢?简单理解就是改变了原来的数组,可能包括数组长度length,或者 ...

  7. vue 手机键盘把底部按钮顶上去

    背景:在写提交订单页面时候,底部按钮当我点击输入留言信息的时候, 底部提交订单按钮被输入法软键盘顶上去遮挡住了. h5 ios输入框与键盘 兼容性优化 实现原理:当页面高度发生变化的时候改变底部but ...

  8. php如何监听页面滚动,html5中在元素滚动条在滚动时触发的事件onscroll

    实例 元素滚动时执行 JavaScript 定义和用法 onscroll 事件在元素滚动条在滚动时触发. 提示: 使用 CSS overflow 样式属性来创建元素的滚动条. 浏览器支持 语法 HTM ...

  9. html 滚动条处于页面底部,滚动条一直置于页面底部,开发聊天程序须知。

    有些时候(如开发聊天程序),我们需要将将滚动条(scrollbar)保持在最底部,比如聊天窗口,最新发出和收到的信息要显示在最下方,如果要看到最下方的内容,就必须保证滚动条保持在最底部. html P ...

最新文章

  1. 第二个Python程序:if,for,while,输出乘法口诀表
  2. 国庆双节长假旅游出行必装的手机软件
  3. Linux 批量依赖库拷贝(ldd)
  4. Linux 文件和目录的属性及权限
  5. Scala元组数据的访问
  6. mac 用惠普扫描仪扫描提示将对您的电脑造成伤害_惠普全能打印神器测评:15秒智能闪充、打一张仅需5分钱...
  7. 下一个更大元素 leetcode-496
  8. Servlet中获取请求行的数据
  9. vgc机器人编程1到13题_工业机器人编程与实操-期末试题
  10. Windows进程通信之共享内存通信(C++)
  11. Android开发笔记(一百七十五)利用Room简化数据库操作
  12. vmware funsion 共享网络模式下PPTP拨号问题
  13. ubuntu截图工具KSnapshot(静态图),peek(动态图)
  14. 文电通PDF编辑转换器[DocuCom PDF Gold] 8.0
  15. 中国粮食安全问题及其应对措施
  16. contiki学习笔记(九)文件系统CFS
  17. 昨天国际电子商情网站贴出了一篇文章《再论企业核心竞争力:为“黑芯”联发科喊冤》,引来争论无数
  18. 探究L298N模块烧毁的原因
  19. android 删除一个工程,Android Studio该怎样删除项目?
  20. 微型计算机硬盘安装在哪,微型计算机的硬盘是该机的

热门文章

  1. Visio画Visio图
  2. 窗口分析函数_8_计算某列的中间值
  3. AdventureWorksDW 2019还原图解
  4. python 按列名称筛选_python中实现excel的高级筛选
  5. Qt使用OpenCV读取图片练习
  6. C++之stdafx.h的用法说明
  7. 一个半路出家的前端工程师的2018 | 掘金年度征文
  8. 转python version 2.7 required,which was not found in the registry
  9. ARM平台YUV转RGB888(转)
  10. 扩展语法检查(SLIN检查)