【转载】 原生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(歌词面板)时,这时就必须停止自动滚动,或者说是不能自动滚动, ...
随机推荐
- 各种sort排序总结
冒泡排序 选择排序 插入排序
- Microsoft:Team Foundation Server 20XX Release Notes
ylbtech-Microsoft:Team Foundation Server 2017 Release Notes 1.返回顶部 1. https://docs.microsoft.com/en- ...
- 我们建了一个 Golang 硬核技术交流群(内含视频福利)
目录 目录 Golang 是什么? 我们为什么选择 Golang? Golang 是云时代的宠儿! 我们搞了一场 Golang 入门直播 Golang 是什么? Golang 是谷歌 2009 年发布 ...
- VirtualBox主机虚拟机互通
首先使用的是桥接模式,桥接模式相当于是使用Hub来把主机以及虚拟机进行关联: 然后就是选择“界面名称”,这里吐槽一下,这里其实是“Interface Name”,Interface代表的是网卡的接口, ...
- Selenium学习之==>Selenium介绍
前世 Selenium RC 早期的Selenium使用的是JavaScript注入技术与浏览器打交道,需要Selenium RC启动一个Server,将操作Web元素的API调用转化为一段段Java ...
- yum安装Apache2.4
一.系统环境 系统版本为centos6.5最小化安装 # cat /etc/centos-release CentOS release 6.5 (Final) 查看系统自带yum库Apache版本 # ...
- 【MyBatis】-----初识【MyBatis】
一.核心配置文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configuration ...
- Scratch少儿编程系列:(二)界面介绍及相关概念
本系列后续所有Scratch的讲解均基于2.0版本介绍.系统启动后,界面如下: Scratch主要包括6个区域: 1. 菜单:新建.打开.保存 Scratch文件,2.0版本文件后缀名为 .sb2 2 ...
- java基础/数据加解密(Mooc)
一.消息摘要算法 常用摘要算法: 以下 (HEX)内容:bc指Bouncy Castle | cc指:Apache commons Codec 1.消息摘要算法MD5及MD族(MD2,MD4) 消 ...
- Xpath素材
from lxml import etree text = """ <div> <ul> <li class="item-0&qu ...