js 判断进入可视区域
js 判断进入可视区域
CreateTime--2018年4月14日08:17:41
Author:Marydon
1.使用场景
图片懒加载时候需要用到,其他情况暂时没有遇到,欢迎留言补充!
2.代码实现
/**
* 监听网页滚动事件
*/
$(window).scroll(function() {
// 获取的是浏览器可见区域高度(网页的可视区域的高度)(不滚动的情况下)
var documentClientHeight = document.documentElement.clientHeight || window.innerHeight
// 元素顶端到可见区域(网页)顶端的距离
var htmlElementClientTop = document.getElementById('#id').getBoundingClientRect().top;
// 网页指定元素进入可视区域
if (documentClientHeight >= htmlElementClientTop) {
// TODO 执行你要做的操作
} });
拓展:
// 获取指定元素距离网页左上角(0,0)的纵向偏移距离
// 该值会随着滚动条的变化而变化:scrollTop变大,该值变小;scrollTop变小,该值变大
document.getElementById('#id').getBoundingClientRect().top;
value = 网页可视区域高度 - 元素距离网页顶部
1.当网页可视区域高度>=元素距离网页顶部时,说明该元素进入可视区域
2.计算可视距离:当value<0时,表示的是该元素差多少像素可以被看到(可视距离 = -value)
3.计算可视高度:当value>0时,表示的是该元素的可视高度(该元素可以被看到的高度)(可视距离 = value)
相关推荐:
js 判断进入可视区域的更多相关文章
- js滚动及可视区域的相关的操作
element.getBoundingClientRect 判断指定元素相对于页面可视窗口的位置信息,通常结合windows.onScroll方法使用,当element.getBoundingClie ...
- JS获取浏览器可视区域尺寸
本文所说的是浏览器窗口的可视区域大小,不是浏览器窗口大小,也非页面尺寸. 在没有声明DOCTYPE的IE中,浏览器显示窗口大小只能以下获取: document.body.offsetWidth doc ...
- JS获取浏览器可视区域的尺寸
所谓可视区域是指能看得见的区域,即在浏览器中能看到页面的区域(高度与宽度).刚刚使用 document.body.clientHeight 来获取可视区域的高度得到的却是整个文档的高度,然后在cnbl ...
- js 获取页面可视区域宽高
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下. 1.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下 document.body.offsetWidth d ...
- 【转】JS获取浏览器可视区域的尺寸
from: http://www.xiaoboy.com/detail/1341545044.html 所谓可视区域是指能看得见的区域,即在浏览器中能看到页面的区域(高度与宽度).刚刚使用 docum ...
- js 判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方。
前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com ...
- 图解js中常用的判断浏览器窗体、用户屏幕可视区域大小位置的方法
有时我们需要获得浏览器窗口或屏幕的大小.窗口下拉框下拉的距离等数据,对应这些需求,js中提供了不少解决方法,只是数量稍多容易混淆它们各自的意义,下面咱们用图例来解释下12个常见对象属性的作用. 其中有 ...
- js可视区域图片懒加载
可视区域图片懒加载 实现原理,页面滚动时获取需要懒加载的图片,判断此图片是否在可视区域内,是则设置图片data-src地址为src地址,加载图片. html下载地址 <!DOCTYPE html ...
- 如何判断元素是否在可视区域ViewPort
个性签名: 生如夏花,逝如冬雪:人生如此,何悔何怨. 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth,clientWidth,scrollWidth,scrollTop这几个 ...
随机推荐
- 初学Hadoop:利用VMWare+CentOS7搭建Hadoop集群
一.前言 开始学习数据处理相关的知识了,第一步是搭建一个Hadoop集群.搭建一个分布式集群需要多台电脑,在此我选择采用VMWare+CentOS7搭建一个三台虚拟机组成的Hadoop集群. 注:1 ...
- python开发_tkinter
Tkinter模块("Tk 接口")是Python的标准Tk GUI工具包的接口.Tk和Tkinter可以在大多数的Unix平台下使用, 同样可以应用在Windows和Macint ...
- python开发_python文件操作
关于python文件操作的详细说明,大家可以参考:关于python的文件操作 官方API:os-Miscellaneous operating system interfaces 下面是我做的demo ...
- Codeforces Beta Round #4 (Div. 2 Only) B. Before an Exam dp
B. Before an Exam 题目连接: http://www.codeforces.com/contest/4/problem/B Description Tomorrow Peter has ...
- java类中属性的加载顺序,以及内存分配情况介绍
看下面例子及说明: /** 假如有外部类调用了该类,代码为:new StaticTest(); 那么下面是类属性的加载顺序 */ public class StaticTest{ public int ...
- Git 中文件的状态和流转区
Git的文件主要处于三种状态,分别是 staged, modified, committed. Git文件流转有三个区域,分别是 工作区域. 索引区域. 本地数据区域. 要修改对一个文件进行操作,首先 ...
- mysql localhost登录和tcp/ip登录 strace
http://blog.itpub.net/15480802/viewspace-1755100/
- NYOJ 618 追击
追击 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描写叙述 因为洛丹伦南部的兽人暴动,不得不使人类联盟採取最后的手段进行镇压.国王泰瑞纳斯派出了两位最棒的圣骑士以遏制兽人的 ...
- 把Jar文件转成exe安装文件
1.你要清楚的目标文件是32位还是64位的,如果生成的是32位,你就要使用32位的jre,如果生成的是64位,就要使用64位的jre. 图 1 在圆圈位置进行32bit或64bit的选择.因为我要创建 ...
- [Android Pro] Android--Sensor传感器
Android提供了对设备传感器的支持,只要Android设备的硬件提供了这些传感器,Android应用可以通过传感器 来获取设备的外界条件,包括手机的运行状态.当前摆放的方向等.Android系统还 ...