JS判断元素是否在可视区域技巧详解
作者:爱划水de鲸鱼哥 发布时间:2024-04-22 12:56:23
前言
在日常开发中,我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值(例如 100 px),从而实现一些常用的功能,例如:
图片的懒加载
列表的无限滚动
计算广告元素的曝光情况
可点击链接的预加载
实现方式
判断一个元素是否在可视区域,我们常用的有offsetTop、scrollTop和getBoundingClientRect
offsetTop、scrollTop
offsetTop
,元素的上外边框至包含元素的上内边框之间的像素距离,其他offset
属性如下图所示:
下面再来了解下clientWidth
、clientHeight
:
clientWidth
:元素内容区宽度加上左右内边距宽度,即clientWidth = content + padding
clientHeight
:元素内容区高度加上上下内边距高度,即clientHeight = content + padding
这里可以看到client
元素都不包括外边距
最后,关于scroll
系列的属性如下:
scrollWidth
和scrollHeight
主要用于确定元素内容的实际大小scrollLeft
和scrollTop
属性既可以确定元素当前滚动的状态,也可以设置元素的滚动位置垂直滚动
scrollTop > 0
水平滚动
scrollLeft > 0
将元素的
scrollLeft
和scrollTop
设置为 0,可以重置元素的滚动位置
注意
上述属性都是只读的,每次访问都要重新开始
下面再看看如何实现判断:
公式如下:
el.offsetTop - document.documentElement.scrollTop <= viewPortHeight
代码实现:
function isInViewPortOfOne (el) {
// viewPortHeight 兼容所有浏览器写法
const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
const offsetTop = el.offsetTop
const scrollTop = document.documentElement.scrollTop
const top = offsetTop - scrollTop
return top <= viewPortHeight
}
getBoundingClientRect
返回值是一个 DOMRect
对象,拥有left
, top
, right
, bottom
, x
, y
, width
, 和 height
属性
const target = document.querySelector('.target');
const clientRect = target.getBoundingClientRect();
console.log(clientRect);
// {
// bottom: 556.21875,
// height: 393.59375,
// left: 333,
// right: 1017,
// top: 162.625,
// width: 684
// }
属性对应的关系图如下所示:
当页面发生滚动的时候,top
与left
属性值都会随之改变
如果一个元素在视窗之内的话,那么它一定满足下面四个条件:
top 大于等于 0
left 大于等于 0
bottom 小于等于视窗高度
right 小于等于视窗宽度
实现代码如下:
function isInViewPort(element) {
const viewWidth = window.innerWidth || document.documentElement.clientWidth;
const viewHeight = window.innerHeight || document.documentElement.clientHeight;
const {
top,
right,
bottom,
left,
} = element.getBoundingClientRect();
return (
top >= 0 &&
left >= 0 &&
right <= viewWidth &&
bottom <= viewHeight
);
}
来源:https://juejin.cn/post/7178480410223968312
猜你喜欢
- Python tcp socket编程详解初学脚本语言Python,测试可用的tcp通讯程序:服务器:#!/usr/bin/env pyth
- 以前的服务器,由于内存的价格过高,一般配置的内存不是很多,超过4GB的当然就不多了.现在的服务器,配置超过4GB就很多,在配作SQL 数据库
- 如何创建一个Python工程并使其具有Pycharm的代码风格,具体如下1、主题这部分教程主要介绍如何创建一个Python工程并使其具有Py
- 本文实例讲述了Python脚本实现虾米网签到功能的方法。分享给大家供大家参考,具体如下:概述这个脚本完成了自动登录虾米网、签到的功能。大致要
- 如下所示:# -*- coding: utf-8 -*-# 要求:输入一行字符,分别统计出其中英文字母、空格、数字和其它字符的个数。def
- 目录一、MySQL的join buffer二、join buffer cache存储空间的分配三、普通的多表查询实现四、join buffe
- XA事务支持限于InnoDB存储引擎。MySQL XA实施是针对外部XA的,其中,MySQL服务器作为资源管理器,而客户端程序作为事务管理器
- 首先看官网的DataFrame.plot( )函数DataFrame.plot(x=None, y=None, kind='line
- 前言支持向量机 (Support Vector Machine, SVM) 是一种监督学习技术,它通过根据指定的类对训练数据进行最佳分离,从
- class Node: def __init__(self,dataval=None): self.d
- 前言激活函数在机器学习中常常用在神经网络隐含层节点与神经网络的输出层节点上,激活函数的作用是赋予神经网络更多的非线性因素,如果不用激励函数,
- python networkx来生成一个图使用python提供的第三方的库networkx,networkx是专门用来生成图论和网络科学里面
- 废话不多说了,直接给大家贴代码了,具体代码如下所示:<!DOCTYPE html> <html> <head&
- 一、DBMS_REDEFINITION(在线重定义)参考MOS文档:_How To Partition Existing Table Usi
- 对于英文不行我来说使用英文版PyCharm实在是太难受了,网上好多汉化补丁都是网友提供了,下面为大家介绍一种PyCharm官方中文语言包汉化
- 一 pandas DataFrame一列赋值问题说明,把b的列赋值给a情况1:a,b index设置相同如下代码import pandas
- 本文实例讲述了基于scrapy实现的简单蜘蛛采集程序。分享给大家供大家参考。具体如下:# Standard Python library i
- 一、停止数据库服务打开sqlserver自带的配置管理器,停止数据库服务。二、打开cmd窗口,执行命令(以管理员运行)以单用户模式启动sql
- java通过mysql的加解密函数实现敏感字段存储1.AES加解密工具类:public class AESUtils {public sta
- web框架是什么?web开发框架是一组工具,同时也提供了非常多的资源,供软件开发人员构建和管理网站、提供web服务、编写web应用程序。它是