理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight
阿新 • • 發佈:2018-10-29
event get 頁面 off 偏移 技術 clientx 滾動 padding
一、clientX和clientY
事件發生時,鼠標距離瀏覽器的可視區域的X、Y軸的位置,不包含滾動條的區域的部分。就算是頁面進行了滾動,鼠標的坐標值還是參考可視區域的。
二、offsetLeft和offsetTop
事件源元素相對於父節點的偏移的像素值。
三、offsetWidth和offsetHeight
獲取的是元素的寬度,包含border,padding,內容寬度,以及滾動條的寬度,和element.getBoundingClientRect()的值是一致的。
四、clientWidth和clientHeight
獲取的是元素實際的內容寬度,不包含border,padding,內容寬度,以及滾動條的寬度。
五、scrollTop和scrollHeight
scrollTop屬性可以獲取或設置一個元素的內容垂直滾動的像素數
scrollHeight是一個元素內容高度的度量,包括由於溢出導致的視圖中不可見內容
scrollHeight = scrollTop + clientHeight
理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight