⭐滑动事件补充

1. 获取元素 在 浏览器窗口 中的 坐标

element.getBoundingClientRect()

// 获取元素的左，上，右和下分别相对 浏览器视窗 的位置

// left top right bottom

2.window视图位置属性

浏览器窗口尺寸 宽度和高度

console.log(window.innerHeight) // 939   仅仅包括滚筒条
console.log(window.outerHeight) // 1050 包括所有工具F12延展整个浏览器
console.log(window.innerWidth)  // 809   仅仅包括滚筒条
console.log(window.outerWidth)  // 1680  包括所有延展整个浏览器

兼容性处理

let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

3.window对象获取整个页面滚动的像素值

window.pageXOffset == window.scrollX; // 总是 true
//返回文档在水平方向滚动的像素值 水平被卷进去的像素
window.pageYOffset == window.scrollY; // 总是 true

4window对象获取浏览器窗口在显示器中的位置

属性名 描述 备注
window.screenX 浏览器窗口在显示器中的水平位置 不支持的浏览器则是undefined
window.screenY 浏览器窗口在显示器中的垂直位置 不支持的浏览器则是undefined
window.screenLeft 浏览器可用空间左边距离屏幕（系统桌面）左边界的距离 不支持的浏览器则是undefined
window.screenTop 浏览器窗口在屏幕上的可占用空间上边距离屏幕上边界的距离 不支持的浏览器则是undefined

5.Screen对象视图属性：有关显示器（用户屏幕）信息的一些属性

属性名 描述 备注
window.screen.height 显示器屏幕的高度，包括工具栏、状态栏等。
window.screen.width 显示器屏幕的宽度，包括工具栏、状态栏等。
window.screen.availHeight 浏览器窗口在屏幕上可占用的高度。
window.screen.availWidth 浏览器窗口在屏幕上可占用的宽度。
window.screen.colorDepth 表示显示器的颜色深度。
window.screen.pixelDepth 该属性基本上与colorDepth一样。

一 元素视图位置属性

  • client家族：clientLeft、clientTop、clientWidth、clientHeight、height、width
  • offset家族：offsetLeft、offsetTop 、offsetWidth、offsetHeight、 offsetParent
  • scroll家族：scrollLeft、scrollTop、scrollWidth 、 scrollHeight

client家族
属性名 描述 备注
clientLeft 表示内容区域的左上角相对于整个元素左上角水平位置（包括边框和滚动条但是不包含元素的padding或margin） 单纯就是border宽度，返回该方向的border宽度。
clientTop 表示内容区域的左上角相对于整个元素左上角垂直位置（包括边框和滚动条但是不包含元素的padding或margin） 单纯就是border高度，返回该方向的border高度。
clientWidth 表示内容区域的宽度，包括padding大小，但是不包括边框和滚动条。
clientHeight 表示内容区域的高度，包括padding大小，但是不包括边框和滚动条。
height 表示内容区域的高度，不包括padding大小、边框和滚动条。
width 表示内容区域的高度，不包括padding大小、边框和滚动
 
offset家族
 
属性名描述备注
offsetLeft 相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 的元素）的左偏移值  
offsetTop 相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 的元素）的上偏移值）。  
offsetWidth 整个元素的宽度（包括边框）。  
offsetHeight 整个元素的高度（包括边框）。  
offsetParent 第一个祖定位元素 offsetParent元素只可能是：<body>、position不是static的元素、<table>, <th> 或<td>，但必须要position: static


scroll家族
 
属性名描述备注
scrollLeft 表示元素滚动的宽度 可读可写
scrollTop 表示元素滚动的高度 可读可写
scrollWidth 表示整个内容区域的宽度，包括隐藏的部分。如果元素没有隐藏的部分，则相关的值应该等用于clientWidth和clientHeight。当你向下滚动滚动条的时候，scrollWidth应该等用于scrollTop + clientHeight  
scrollHeight 表示整个内容区域的高度，包括隐藏的部分。如果元素没有隐藏的部分，则相关的值应该等用于clientWidth和clientHeight。当你向下滚动滚动条的时候，scrollHeight应该等用于scrollLeft + clientWidth  


文档视图(DocumentView)和元素视图(ElementView)方法

  • elementFromPoint()
  • getBoundingClientRect()
  • getClientRects()
  • scrollIntoView()

参考来自于     有个案例可以再关注一下




posted @ 2020-04-28 16:42  容忍君  阅读(194)  评论(0)    收藏  举报