吖冼的Blog

1 offset家族

TIP

event.target的属性

1.1 offsetParent

表示元素中最近的带有定位的祖先元素

1.2 offsetTop

相对于offsetParent的top

1.3 offsetLeft

相对于offsetParent的left

HTML DOM Element offsetLeft Property (w3schools.com)open in new window

HTML DOM offsetTop 属性 | 菜鸟教程 (runoob.com)open in new window

1.4 offsetWidth

元素的实际宽度

1.5 offsetHeight

元素的实际高度

clientTop

HTML DOM Element clientTop Property (w3schools.com)open in new window

scrollTop

HTML DOM Element scrollTop Property (w3schools.com)open in new window

clientX与clientY

TIP

event的属性clientX和clientY

MouseEvent clientX Property (w3schools.com)open in new window

offsetX和offsetY

TIP

event的属性offsetX和offsetY

MouseEvent offsetX Property (w3schools.com)open in new window

offsetX = clientX - offsetLeft
offsetY = clientY - offsetTop

Double Heart Click 项目

[AeroxianのBlog (aeroxian.github.io)](https://aeroxian.github.io/minifrontendproject/09 Double Heart Click.html)

参考

The difference between offsetTop, scrollTop & clientTop (& why you should never use them) | by Arnav Zedian | Mediumopen in new window

Smooth Scrolling | CSS-Tricks - CSS-Tricksopen in new window

How to Make an Unobtrusive Scroll-to-Top Button | CSS-Tricks - CSS-Tricksopen in new window