Khả năng cuộn giới hạn trên các thành phần canvas HTML5

Question

Tôi đã có một loạt hình chữ nhật được vẽ trên canvas và sử dụng trình xử lý sự kiện cuộn để di chuyển các hộp lên và xuống.

Tôi đang cố gắng thêm vào một số xác thực để các hộp không thể cuộn qua một điểm nhất định.

Do tăng tốc, các giá trị cuộn không phải lúc nào cũng tăng thêm 1, vì vậy khi cuộn nhanh, đôi khi việc xác thực của tôi khởi động quá sớm.

Bất kỳ ý tưởng nào về cách giải quyết vấn đề này?

Vì vậy, trong lắng nghe sự kiện của tôi, tôi có:

lScroll += e.deltaY; 

if (lScroll > 0) { 
    canScroll = false; 
    lScroll = 0; 
} else { 
    canScroll = true; 
} 

https://jsfiddle.net/kr85k3us/3/

Answer 1

Vui lòng kiểm tra nếu điều này đang làm việc cho bạn: https://jsfiddle.net/kr85k3us/4/

Tôi đã thử nghiệm nó và nó nên làm việc, nhưng có lẽ bạn có thể di chuyển con lăn chuột nhanh hơn :)

if (!canScroll && lScroll == 0) { 
    var first = Object.keys(boxes)[0]; 

    if (boxes[first]['y'] < 10) { 
     var delta = 10 - boxes[first]['y']; 
     Object.keys(boxes).forEach(function(k){ boxes[k]['y'] += delta; }); 
    } 
} 

Đây là đoạn mã tôi đã thêm vào. Nếu bạn không thể cuộn và lScroll là 0, điều đó có nghĩa là chúng tôi đã đạt đến đỉnh. Tiếp theo, tôi kiểm tra xem hộp đầu tiên có đúng không. Nếu không (ví dụ: boxes[first]['y'] < 10) thì nó sẽ điều chỉnh tất cả các vị trí của hộp 'y.