获取元素到页面可视区域底部的距离_js获取元素距离底部的距离-程序员宅基地

技术标签: 前端  

1. 思路分析

  • 当前可视区域的高度 - (元素到文档顶部的距离 - 滚动条滚动的距离)- 元素自身的高度

2. 实现

  • JS:window.innerHeight - (dom.offsetTop - window.pageYOffset) - dom.offsetHeight
    • dom是当前要获取的元素
    • 不兼容IE
  • jquery:$(window).height() - (dom.offset().top - $(document).scrollTop()) - dom.height()
    • dom是当前要获取的元素
  • vue:window.innerHeight - e.target.getBoundingClientRect().y -e.target.getBoundingClientRect().height
    • e是当前元素参数$event
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/gz_ok/article/details/106521747

智能推荐

org.h2.jdbc.JdbcSQLInvalidAuthorizationSpecException: Wrong user name or password [28000-200]-程序员宅基地

文章浏览阅读5.5k次,点赞2次,收藏2次。连接H2报org.h2.jdbc.JdbcSQLInvalidAuthorizationSpecException: Wrong user name or password [28000-200]一般是要连接的数据库已经存在原因:我们之前创建过该数据库,H2数据库会初始化用户名和密码,配置文件properties中重新定义了数据库的用户名和密码,造成了冲突。处理方案一:删除原来..._org.h2.jdbc.jdbcsqlinvalidauthorizationspecexception: wrong user name or pas

判断字符串数组是否为空_字符串数组判空-程序员宅基地

文章浏览阅读4.6k次。1、array == null 和array.length == 0的区别int[] a;int[] b = null;int[] c = new int[3];打印数组a时:Error:java: 可能尚未初始化变量a打印数组b时:null;打印数组b的长度时: java.lang.NullPointerException打印数组c时:[I@427a8ba4;打印数组c的长度时:32、&&和||的区别a || b:a或b任意一个为true 就返回true , 否则返回fa_字符串数组判空

JAVA项目spring、mybatis、springMVC 模态窗口,后端代码设计 | part2_模态窗口代码怎么写-程序员宅基地

文章浏览阅读195次。JAVA项目(使用SSM实现)各部分详细分析(CRM)|| part2。_模态窗口代码怎么写

SAP MM零基础学习-第一篇-模块简介_sap mm培训csdn-程序员宅基地

文章浏览阅读3.5k次,点赞5次,收藏46次。MM物料管理是SAP R/3系统的一个模块,SAP在标准软件系统市场中处于领先地位。由于使用先进的开发技术,SAP能够为业务的各个方面提供数据处理的解决方案。物料管理模块支持日常发生的业务处理功能和过程。几乎没有一个领域具有这样一个具有广泛应用范围和满足需求的标准软件包,这来自于特殊的工业需求、特殊的产品特点和公司策略。系统还具有与其他商业应用的接口。MM系统(物料管理)的目的是满足下列各种处理,即物料需求计划、物料采购、库存管理、发票确认和物料估价。MM(Material Management)._sap mm培训csdn

XCKU5P-2FFVB676E 赛灵思FPGA可编程逻辑芯片器件 XILINX-程序员宅基地

文章浏览阅读792次。产品概述Xilinx FPGA系列具有优秀的性价比, 性能, 功率消耗, 提供高端功能, 例如收发器, 存储器接口线路速率, 100G连接芯片等。FPGA可选择-3, -2, -1速度级别。该系列非常适合数据包处理, DSP功能, 以及无线MIMO技术, Nx100G网络和数据中心等应用。该器件采用UltraScale架构, 具有超高的性能, 带有片上UltraRAM存储器, 可降低BOM成本, 可配合高性能外设创建高性价比系统。FPGA具有多种电源选项, 平衡系统性能和所需功率。多达120万个系统_ku5p

计算机科学与技术b类大学名单,南京信息工程大学a类学科有哪些?附学校第四轮学科评估结果...-程序员宅基地

文章浏览阅读1.1k次。选择科目测一测我能上哪些大学选择科目领取你的专属报告>选择省份关闭请选择科目确定v>南京信息工程大学是江苏省一所知名高校,位于江苏省南京市,国家首批世界一流学科建设高校。本期,小编将为大家介绍南京信息工程大学在教育部全国第四轮学科评估中的相关学科情况,可供参考。一、南京信息工程大学A类学科名单(1个学科)A+:大气科学二、南京信息工程大学B类学科名单(4个学科)B:计算机科学与技术B-..._南京信息工程大学a-学科

随便推点

Pygame游戏开发:添加游戏暂停功能_pygame暂停游戏-程序员宅基地

文章浏览阅读251次。在游戏开发中,游戏暂停功能是一个常见且重要的特性。当玩家需要暂停游戏时,这个功能可以提供便利,让玩家有时间休息、调整设置或者处理其他事务。在本文中,我们将学习如何使用Pygame库为我们的游戏添加暂停功能。现在,你已经成功地为你的Pygame游戏添加了暂停功能。当游戏暂停时,你可以选择不执行游戏逻辑更新和绘制操作,从而实现游戏的暂停效果。如果不是暂停状态,我们可以执行游戏的逻辑更新和绘制操作。你可以在注释的位置添加你的游戏逻辑。以上代码中,我们创建了一个800x600的游戏窗口,并设置了窗口标题。_pygame暂停游戏

CM+CDH 构建企业大数据平台_cm平台架构-程序员宅基地

文章浏览阅读1.2k次,点赞22次,收藏20次。CDH创建了一个功能先进的系统,可帮助您执行端到端的大数据工作流程。_cm平台架构

对偶律_概率论对偶律公式-程序员宅基地

文章浏览阅读1.7w次。集合对偶律证明(A∩B)C=AC∪BC.能不能用图中的颜色来说明,首先,整个 I 区域被 A、B 分割为互不重叠的 4 部分:灰、红、蓝、绿;而对偶律,也就是上面这个公式,可以这样证明:左边 = [(红绿) 与 (蓝绿) 的交] 的补 = [绿] 的补 = 灰红蓝;右边 = [(红绿) 的补] 与 [(蓝绿) 的补] 的并 = [(灰蓝)] 与 [(灰红_概率论对偶律公式

web前端20种字体_前端艺术字-程序员宅基地

文章浏览阅读2.5w次。【代码】web前端20种字体。_前端艺术字

掌握Vue3模板语法,助你轻松实现高效Web开发_陈书予 vue3-程序员宅基地

文章浏览阅读3w次,点赞5次,收藏3次。Vue3中的模板语法是Vue框架中的核心特性之一,它可以帮助我们快速构建复杂的UI界面和交互逻辑。除了常见的模板指令和数据绑定,Vue3还提供了插槽和动态组件等高级特性,可以让我们更加灵活地开发Vue应用。在使用Vue3的模板语法时,需要注意避免使用过多的复杂。_陈书予 vue3

基础生信分析——富集分析(2)-程序员宅基地

文章浏览阅读301次,点赞11次,收藏5次。接基础生信分析——富集分析(1)以上是四种高级GO富集分析图,请注意,无论多复杂的可视化,其结果都是一样的,并且目的都是清晰的展示功能注释结果。