JS中offset、client、scroll用法

offset、client、scroll用法

offset

• 定位父级offsetParent
  • 与当前元素最近的经过定位的父级元素
  • 元素自身有fixed定位，offsetParent是null
  • 元素自身无fixed定位，但有其他定位，offsetParent是body
  • 元素自身无定位，父级元素存在定位，offsetParent是以最近的经过定位的父级元素
  • body元素的offsetParent是null
  • 可以通过element.offsetParent查看元素的定位父级
• offsetWidth和offsetHeight
  • 宽高+内边距宽高+边框宽高
  • offsetWidth = width + border-left + border-right + padding-left + padding-right
  • offsetHeight = Height + border-top + border-bottom + padding-top + padding-bottom
  • 可以通过element.offsetWidth和element.offsetHeight获取到相应的值
  • offsetWidth和offsetHeight的值是只读的，无法通过js去修改
• offsetTop和offsetLeft
  • offsetTop
    • 当前元素的上边框到offsetParent元素的上边框的距离
  • offsetLeft
    • 当前元素的左边框到offsetParent元素的左边框的距离
  • 相对于父元素(看父元素是否有定位，如果有定位，以父元素为基准，如果没有则往上寻找，如果一直找不到，则以body为准)的上边框和下边框

client

• 所有的client属性都是只读的

• 客户端大小

  • 指的是当前元素内容到内边距占据的空间大小，不包含border

• clientWidth和clientHeight

  • clientWidth = width + padding-left + padding-right
  • clientHeight = height + padding-top + padding-bottom

• clientLeft和clientTop

  • clientLeft = border-left
  • clientTop = border-top

scroll

• scrollWidth和scrollHeight

  • scrollWidth：表示元素的总宽度,包含由于溢出而无法在网页上的不可见部分
  • scrollHeight：表示元素的总高度,包含由于溢出而无法在网页上的不可见部分
  • 无滚动条时候,scrollHeight跟clientHeight属性结果是相等的

• scrollTop和scrollLeft

  • scrollTop：元素被卷起的高度
  • scrollLeft：元素被卷起的宽度
  • 可读写

• 页面滚动

  • <script type="text/javascript">
    			window.onscroll = function () {
    				// 兼容代码
    				let docScrollTop = document.documentElement.scrollTop || document.body.scrollTop
    				let btn = document.getElementById('btn')
    				btn.onclick = scrollTop
    
    				function scrollTop() {
    					// 页面滚动到指定位置
    					if (docScrollTop) {
    						document.documentElement.scrollTop = document.body.scrollTop = 100
    					}
    				}
    			}
    </script>