vue滚动条滚到到底部触发的方法
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滚动条滚到到底部触发的方法相关推荐
- js实现判断滚动条滚到页面底部并执行事件的方法
这里我主要介绍JS实现判断滚动条滚到页面底部并执行事件的方法: 需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个 ...
- java 滚动条的事件_[Java教程]jquery如何判断滚动条滚到页面底部并执行事件
[Java教程]jquery如何判断滚动条滚到页面底部并执行事件 0 2016-04-27 10:00:13 本文章向码农介绍jquery如何判断滚动条滚到页面底部并执行事件.首先理解三个dom元素, ...
- vue的div滚动条自动到底部_vue 每次渲染完页面后div的滚动条保持在最底部的方法...
下面我就为大家分享一篇vue 每次渲染完页面后p的滚动条保持在最底部的方法,具有很好的参考价值,希望对大家有所帮助. 实例如下: //每次页面渲染完之后滚动条在最底部updated:function( ...
- php滚动条怎么用,如何让滚动条自动滚到最底部
让滚动条自动滚到最底部的方法:首先在DIV的底部添加一隐藏元素"element":然后调用"element.scrollIntoView()"方法:最后使元素滚 ...
- vue底部选择器_vue实现动态显示与隐藏底部导航的方法分析
vue实现动态显示与隐藏底部导航的方法分析 本文实例讲述了vue实现动态显示与隐藏底部导航的方法.分享给大家供大家参考,具体如下: 在日常项目中,总有几个页面是要用到底部导航的,总有那么些个页面,是不 ...
- vue 加载页面时触发时间_5.6 vue更新数组时触发视图更新的方法,熟记JavaScript原生方法...
问题:vue更新数组时触发视图更新的方法 变异方法: Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.什么是变异方法呢?简单理解就是改变了原来的数组,可能包括数组长度length,或者 ...
- vue 手机键盘把底部按钮顶上去
背景:在写提交订单页面时候,底部按钮当我点击输入留言信息的时候, 底部提交订单按钮被输入法软键盘顶上去遮挡住了. h5 ios输入框与键盘 兼容性优化 实现原理:当页面高度发生变化的时候改变底部but ...
- php如何监听页面滚动,html5中在元素滚动条在滚动时触发的事件onscroll
实例 元素滚动时执行 JavaScript 定义和用法 onscroll 事件在元素滚动条在滚动时触发. 提示: 使用 CSS overflow 样式属性来创建元素的滚动条. 浏览器支持 语法 HTM ...
- html 滚动条处于页面底部,滚动条一直置于页面底部,开发聊天程序须知。
有些时候(如开发聊天程序),我们需要将将滚动条(scrollbar)保持在最底部,比如聊天窗口,最新发出和收到的信息要显示在最下方,如果要看到最下方的内容,就必须保证滚动条保持在最底部. html P ...
最新文章
- 第二个Python程序:if,for,while,输出乘法口诀表
- 国庆双节长假旅游出行必装的手机软件
- Linux 批量依赖库拷贝(ldd)
- Linux 文件和目录的属性及权限
- Scala元组数据的访问
- mac 用惠普扫描仪扫描提示将对您的电脑造成伤害_惠普全能打印神器测评:15秒智能闪充、打一张仅需5分钱...
- 下一个更大元素 leetcode-496
- Servlet中获取请求行的数据
- vgc机器人编程1到13题_工业机器人编程与实操-期末试题
- Windows进程通信之共享内存通信(C++)
- Android开发笔记(一百七十五)利用Room简化数据库操作
- vmware funsion 共享网络模式下PPTP拨号问题
- ubuntu截图工具KSnapshot(静态图),peek(动态图)
- 文电通PDF编辑转换器[DocuCom PDF Gold] 8.0
- 中国粮食安全问题及其应对措施
- contiki学习笔记(九)文件系统CFS
- 昨天国际电子商情网站贴出了一篇文章《再论企业核心竞争力:为“黑芯”联发科喊冤》,引来争论无数
- 探究L298N模块烧毁的原因
- android 删除一个工程,Android Studio该怎样删除项目?
- 微型计算机硬盘安装在哪,微型计算机的硬盘是该机的
热门文章
- Visio画Visio图
- 窗口分析函数_8_计算某列的中间值
- AdventureWorksDW 2019还原图解
- python 按列名称筛选_python中实现excel的高级筛选
- Qt使用OpenCV读取图片练习
- C++之stdafx.h的用法说明
- 一个半路出家的前端工程师的2018 | 掘金年度征文
- 转python version 2.7 required,which was not found in the registry
- ARM平台YUV转RGB888(转)
- 扩展语法检查(SLIN检查)