[Javascript] - getBoundingClientRect() & Giúp bạn check 1 phần tử có đang trong tầm nhìn hay ko

getBoundingClientRect() là một phương thức trong JavaScript được sử dụng để trả về kích thước và vị trí tương đối của một phần tử trong tài liệu (document) so với khung nhìn hiện tại của trình duyệt. Kết quả trả về là một đối tượng DOMRect chứa thông tin về kích thước và vị trí của phần tử.
Đối tượng DOMRect bao gồm các thuộc tính sau:
- x: Tọa độ X của góc trên bên trái của phần tử tính từ góc trên bên trái của viewport.
- y: Tọa độ Y của góc trên bên trái của phần tử tính từ góc trên bên trái của viewport.
- width: Chiều rộng của phần tử.
- height: Chiều cao của phần tử.
- top: Khoảng cách từ góc trên của phần tử đến góc trên của viewport.
- right: Khoảng cách từ góc phải của phần tử đến góc trái của viewport.
- bottom: Khoảng cách từ góc dưới của phần tử đến góc trên của viewport.
- left: Khoảng cách từ góc trái của phần tử đến góc trái của viewport.
- Phương thức này thường được sử dụng để tính toán vị trí của một phần tử -trong trang, hoặc kiểm tra xem phần tử đó có nằm trong tầm nhìn của người dùng hay không, như trong ví dụ mà tôi đã cung cấp trước đó khi xử lý sự kiện cuộn trang.

[@PerfumeBoxLotus]

thanks bro 🎉

[@Cheems_Galaxy]

vào một số trang web lớn thấy quả animation như này mà k bt họ làm ntn tks đã thông não cho toii

[@HienNguyen-lh9dc]

Intersection observe

[@yeh9718]

bữa giờ e k biết code như này, toàn dùng data-aos :)) thanks a vì 1 kiến thức mới

[@turniodev]

[@PerfumeBoxLotus]

sử dụng hàm document. thì làm console.log ra nhiều thông tin quá thì có làm ảnh hưởng đến quá trình người dùng k bro ?

[@turniodev]

đừng log ra kkkk. scroll thì cũng là event lắng nghe khi làm các website có nút scroll to top và header kiểu thay đổi á. Nên lắng nghe thì ko ảnh hưởng gì đâu cũng như 2 chức năng header với scroll to top thôi à

[@nishigitakakata]

Bạn đã đi làm chưa.

[@turniodev]

mình đi làm 3 năm rui

[@turniodev]

mk làm ideat trc vô marketing xong h làm full bên Front-end dev lun kakakkaa