一文读懂 offsetHeight、clientHeight、scrollHeight.....

ITWYY

关注

阅读 27

2021-09-30

一、 offset相关

  1. offsetTopoffsetLeft
    只读属性,为与定位的最近的父级元素的距离,offsetParent用于获取定位的父级元素。若没有指定,则为bodyoffsetLeft指的是元素左侧偏移offsetParent的距离,offsetTop指的是上侧偏移的距离
  2. offsetHeightoffsetWidth
    只读属性,返回的是元素的整体高度或宽度,包括元素的边框、内边距和滚动条(如果有的话 )
    即:offsetHeight = height + padding + border

二、client 相关

clientHeightclientWidth包括padding,但不包括border, margin和滚动条
即:clientHeight = height + padding

三、scroll 相关

  1. scrollHeightscrollWidth
    返回元素内容的整体尺寸,包括元素看不见的部分(需要滚动才能看见的)。返回值包括padding,但不包括marginborder
    ⚠️注意:为元素内容的高度,而不是元素的高度
  2. scrollTopscrollLeft
    如果元素不能被滚动,则为0。

四、判定元素是否滚动到底

如果元素滚动到底,下面等式返回true,没有则返回false.
element.scrollHeight - element.scrollTop === element.clientHeight

精彩评论(0)

0 0 举报