Lỗi khi Scroll trong Javascript

GaCoder · April 12, 2022, 2:35am

Chào mn!
Mình đang có viết 1 đoạn mã với mục đích là khi bắt sự kiện cuộn trang, một phần tử sẽ bị giảm đi kích thước bằng đúng số pixel đã cuộn (Ở đây là hình cái đĩa than tròn của máy phát nhạc)
Code của mình như dưới:

let phanTu = document.querySelector(".phonograph");
     kichThuocBanDau = phanTu.offsetWidth;

document.addEventListener("scroll", function() {
    let scrollY = window.scrollY,
         kichThuocMoi = kichThuocBanDau - scrollY
         console.log(kichThuocMoi);
         phanTu.style.width = kichThuocMoi + "px";
})

Vấn đề mà mình đang gặp phải là giường như trình duyệt nhận quá nhiều sự kiện scroll (nhận vô hạn) khiến cho phần tử bị thay đổi kích thước liên tục (mình có test với console.log để xác nhận thì console cũng in ra kết quả liên tục như hình bên dưới). Mn ai biết giúp đỡ mình với ạ! Mình cảm ơn

Phần tử .phonograph bị thay đổi width liên tục

console.log() chạy liên tục dù chỉ scroll 1 lần (cứ cho là 1 lần cuộn trang đó nó sẽ console ra tầm 10 - 15 kết quả)

kisuluoibieng · April 12, 2022, 4:28am

scroll là một thao tác có duration, túc là trong khoảng thời gian, thì trong khoản thời gian đó, nó raise lên event liên tục là đúng rồi
bạn scroll liên tục 10s, thì theo bạn, cần bắt sự kiện lúc nào? mỗi pixcel mỗi event, mỗi 1s mỗi event??
bạn đã thấy vấn đề, vậy bạn muốn giải quyết nó như nào, kết quả mong đợi của bạn là gì? nhận bao nhiêu event, nhận khi nào (chỉ 1 evebắt đầu scroll, kết thúc scroll, hay mỗi giây lúc scroll, hay mỗi lần scroll được px)?

GaCoder · April 12, 2022, 4:49am

bạn có thể teamview giúp mình để mình tiện trình bày vấn đề hơn được không. mình cảm ơn

kisuluoibieng · April 12, 2022, 5:27am

bạn cứ trình bày ở đây, giả sử bạn scroll liên tục 10s, thì bạn mong đợi bao nhiêu event và vào lúc nào?

GaCoder · April 12, 2022, 6:02am

Trường hợp của mình nó kiểu khi cuộn chuột 1 lần duy nhất, nếu bình thường ra thì trình duyệt nó sẽ nhận là 1 lần cuộn chuột đó tương ứng với 10-15 sự kiện scroll. Nhưng vấn đề mình đang gặp phải là cũng đúng 1 lần cuộn chuột đó, thì trình duyệt nó nhận sự kiện scroll liên tục, không có điểm dừng.
Vấn đề này xảy ra khi mình chạy dòng code ở cuối:
phanTu.style.width = kichThuocMoi + "px"
Nếu bỏ nó đi thì code lại bình thường. Tức là khi đó với cùng 1 lần cuộn trang đó thì trình duyệt sẽ chỉ console.log() tầm 10-15 lần. Nhưng cứ thêm nó vào là trình duyệt lại console.log() liên tục mà không có điểm dừng
Vi ko up được video lên nhìn ảnh khiến mọi người ban đầu khó hình dung

SITUVN.gcd · April 13, 2022, 9:24am

Khi thay đổi chiều cao (heigh) và rộng (width) thì sự kiện scroll cũng sẽ xảy ra.
Bạn có lẽ nên cần có 1 cờ để đánh dấu bạn đang thay đổi giá trị trong sự kiện để ngừng xử lý sự kiện đó.

Hoặc có cách thông mình hơn cho mục đích của bạn. Bạn đang muốn làm gì vậy? Bạn muốn mỗi lần cuộn là kích thước của .phonograph sẽ thay đổi. Tức là bạn muốn thực hiện thao tác thu/phóng (zoom in/zoom out) ảnh. Không nên bắt sự kiện scroll bạn à, thay vào đó là sự kiện wheel và rất hay khi kết hợp với nhấn phím. Vd: Ctrl + Lăn chuột lên = Phóng to, Ctrl + Lăn chuột xuống = Thu nhỏ.
Bạn có thể tham khảo tài liệu ở trang Mozilla Developer, trong đó có cả chú ý cho bạn về sự khác biệt giữa 2 sự kiện wheel và scroll:

GaCoder · April 13, 2022, 9:25am

Cảm ơn bạn. Mình đã giải quyết được vấn đề