【转载】 原生js判断某个元素是否滚动到底部
document.querySelector('.content').addEventListener('scroll',function () {
//读取内容区域的真实高度(滚动条高)
// console.log(this.scrollHeight);
//读取滚动条的位置
// console.log(this.scrollTop);
//设置滚动到的位置
// this.scrollTop=800;
//读取元素的高度
// console.log(this.clientHeight)
//意思就是内容总体的高度 - 滚动条的偏移值 === 元素的高度(包含内边)但不包含外边距,边框,以及滚动条
if(this.scrollHeight-this.scrollTop===this.clientHeight){
console.log("到达底部");
}
})
【转载】,刘备用,地址:http://blog.csdn.net/jayhkw/article/details/53760478
【转载】 原生js判断某个元素是否滚动到底部的更多相关文章
- JS + jQuery 实现元素自动滚动到底部,兼容IE、FF、Chrome
HTML代码: <ul class="tasklog-dialog-ul" id="auto_to_bottom"> <li>删除虚拟机 ...
- 原生js判断手机端页面滚动停止
var topValue = 0,// 上次滚动条到顶部的距离 interval = null;// 定时器 contactsList = document.getElementById(" ...
- 原生js判断某个元素是否有指定的class名的几种方法
[注意]以下方法只对class只有一个值的情况下操作 ************************************************************* 结构部分: <d ...
- 函数语法:原生js判断某个元素是否有指定的class名的几种方法
var aLi = document.querySelectorAll('#tabs li'); for(var i = 0;i <p.length;i++){ //第一种方法,用classLi ...
- 原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
- js判断一个元素是否在数组中
js判断一个元素是否在数组中 var arr = ['a','s','d','f']; console.info(isInArray(arr,'a'));//循环的方式 function isInAr ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
- js 判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方。
前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com ...
- js判断用户是否正在滚动滚动条,滚动条滚动是否停止
js智能判断是否可以自动滚动 比如,做一个音乐播放器,边播放,边定位歌词,播放的时候,需要自动定位到播放语句,但是用户去拖动或者滚动div(歌词面板)时,这时就必须停止自动滚动,或者说是不能自动滚动, ...
随机推荐
- 对vi/vim的一些看法
早在网上看到别人如何把vi吹得神乎其神了,决定试着用一下.不过还是发现太麻烦了,因为我是在windows系统下面的,网络的原因无法使用linux系统(无校园电信客户端). 首先vim只是一个文本编辑器 ...
- redis 管理工具
1.redis studio 2.redis desktop manager
- Jmeter接口测试系列之判断测试结果
在使用jmeter进行接口测试时,我们需要根据测试用例判断其测试结果是否一致,判断其执行是否成功. 在jmeter中也可以使用响应断言去判断,但是有时我们需要根据不同的用例,其判断条件不同,所以这里我 ...
- 【工具安装】kali linux 安装教程
日期:2019-07-14 16:36:21 介绍:使用最新版的 VMware 来安装 kali linux 0x01.下载镜像 首先需要安装 VMware,安装步骤点这里. VMware 安装教程 ...
- Asp .Net Mvc在DeBug模式下设置自定义IP
首先打开所在项目下的.vs文件(查看隐藏文件) 打开config下的applicationhost.config文件 往下拖大概100多行的位置,复制一下binding,然后设置本地ip,如果是设置i ...
- Spring MVC的RequestContextHolder使用误区
JShop简介:jshop是一套使用Java语言开发的B2C网店系统,致力于为个人和中小企业提供免费.好用的网店系统. 项目主页:http://git.oschina.net/dinguangx/js ...
- win10在文件夹下打开powershell
快捷键win+R,输入cmd可以直接打开终端命令行窗口 在文件夹下打开终端命令行端口: 在需要的文件夹目录下,按住shift键,在空白处右击,选择在此处打开powershell窗口,即可进行终端命令行 ...
- Go语言入门篇-高级数据类型
一.数组类型 二.切片类型 切片的更多操作方法 示例: 三.字典类型 四.通道类型 示例: 通道的更多种类 示例: 五.函数 示例: 六.结构体和方法 示例: 七.接口 八.指针 示例: mooc
- IDEA中解决 git pull 冲突
0.事先准备.1)把远程仓库的README.md内容改写为bbb(原先为aaa). 2)本地仓库的README.md内容改写为ccc(原先也为aaa). 以此来模仿代码冲突. 1.先commit ...
- 只使用非递归的mutex
mutex分为递归(以下简写为rm)和非递归(以下简写为nrm)两种,它们的唯一区别在于:同一个线程可以重复对rm加锁,但是不能重复对nrm加锁. 虽然rm使用起来要更加方便一些,并且不用考虑一个线程 ...