当前位置: 首页 > article >正文

JS 偏移量和鼠标位置

偏移量

scrollTop:获取当前元素顶部与页面顶部的距离(可见区域+被滚动条卷去的部分)

screenTop:获取当前元素顶部至屏幕顶部的距离

offsetTop:获取当前元素顶部至有定位的父元素顶部的距离

offsetParent:获当前元素的有定位的上级父元素

offsetWidth:获取当前元素的可视区域宽( width+padding+border)

clientWidth:获取当前元素的可视区域宽(width+padding)

scrollWidth:获取当前元素的整体宽度,包括可视区域外不可见的部分

鼠标位置

获取鼠标点击位置的几个坐标属性

1.clientX、clientY

鼠标相对于浏览器窗口可视区域x、y方向坐标(不包含滚动条)

2.pageX、pageY

鼠标相对于页面x、y方向坐标(包括被滚动条卷去的部分)

3.offsetX、offsetY

鼠标相对于事件源元素的x、y坐标,即相对于有定位的父级元素的位置,若没有则默认body

4.screenX、screenY

鼠标相对于电脑屏幕x、y方向坐标

获取属性

var topValue = document.documentElement.scrollTop || document.body.scrollTop;

document.documentElement是文档节点树的根节点,即<html>

document.body是body的节点,即<body>


http://www.kler.cn/a/429795.html

相关文章:

  • 记录一下vue2项目优化,虚拟列表vue-virtual-scroll-list处理10万条数据
  • 基类指针指向派生类对象,基类指针的首地址永远指向子类从基类继承的基类首地址
  • AI人工智能(2):机器学习
  • RabbitMQ中Fanout交换机的深入探讨
  • 高质量阅读微信小程序ssm+论文源码调试讲解
  • C# 中的静态构造函数和实例构造函数的区别
  • docker 部署seata
  • 思科模拟器路由器的基本配置
  • 数据挖掘:一、Weka软件的基本操作
  • ubuntu如何安装cuda 11.8版本
  • 21天掌握javaweb-->第12天:Spring Boot项目优化与安全性
  • YOLOv10改进,YOLOv10添加CARAFE轻量级通用上采样算子,可提高目标检测性能
  • 创建 React Native 项目
  • 满足地图“颜控”,打造百变风格地图
  • 自动驾驶数据集的应用与思考
  • Grafana功能菜单介绍
  • VS中报错,无法嵌入互操作类型XXX,请改用适用的接口的解决方法
  • Go语言基础教程1
  • C# 中的异步编程:提升应用程序响应性和性能
  • Redis原理—2.单机数据库的实现
  • uviewplus中的时间单选框up-datetime-picker的在uni-app+vue3的使用方法
  • 新手前端开发入职公司全流程
  • 使用wpa_cli调用接口报错failed opendir