Hoạt ảnh dựa trên JavaScript di chuyển bị tắt trên di động

Question

Tôi có 2 div (trái và phải) và tôi muốn cuộn sang trái dựa trên bên phải. https://jsfiddle.net/3jdsazhg/2/

này hoạt động tốt trên máy tính để bàn, nhưng khi tôi chuyển sang điện thoại di động, nó không mịn nữa ... này có thể được nhận thấy rất dễ dàng, bằng cách thay đổi

_left.style.top = _content.scrollTop - (_content.scrollTop * ratioLeftRight) + 'px'; 

để

_left.style.top = _content.scrollTop + 'px'; 

Vị trí phải hoạt động như một vị trí cố định div

1. Tôi muốn biết lý do chính xác tại sao điều này không trơn tru ... Tôi biết rằng nó không phải là hình ảnh động. Hoạt ảnh đơn giản trên div là mượt mà, vấn đề xuất hiện khi nó dựa trên cuộn.
2. Làm cách nào để làm cho hoạt ảnh này mượt mà?

Answer 1

Cuối cùng tôi đã nghĩ ra giải pháp. Theo quan điểm của tôi, tôi đoán chế độ xem trên thiết bị di động kích hoạt sự kiện cuộn ít thường xuyên hơn và vì chúng tôi cuộn trình bao bọc, trước tiên chúng tôi cuộn toàn bộ trang và sau đó cuộn lại với phần j và phần còn lại từ phiên bản dành cho máy tính để bàn, sự cố này sẽ hiển thị ...

Giải pháp là thay đổi bên trái thành vị trí cố định và trừ từ trên cùng thay vì thêm vào nó.

_left.style.top = -(_content.scrollTop * ratioLeftRight) + 'px'; 

Answer 2

Nó có thể bị thay đổi vì nó bị sa thải ALOT khi được cuộn, trên thực tế tôi khá chắc chắn iOS di động tạm dừng thực thi javascript trong khi người dùng đang cuộn.

Thay vào đó tôi khuyên bạn nên sử dụng một khoảng thời gian, bạn có thể tinh chỉnh thời gian giữa mỗi khoảng thời gian với những gì cảm thấy tốt cho trường hợp sử dụng của bạn.

Mặc dù nó có vẻ chuyên sâu khi kích hoạt logic này mỗi X mili giây khi sử dụng sự kiện cuộn bạn có thể kích hoạt sự kiện hàng trăm lần mỗi giây, điều này sẽ trở nên chuyên sâu hơn và đáng chú ý hơn cho người dùng sử dụng thiết bị có công suất xử lý giới hạn.

(function() { 
    var interval = null, 

     //Currently set at 0.4 seconds, play with the code 
     //and change this value to see what works best for 
     //this use-case 
     time_between_interval = 400; 

    setInterval(scrollLogic, time_between_interval); 

    function scrollLogic() { 
     //The function body of what you're assigning 
     //to the scroll event. 
    } 

    //I have omitted clearing the interval but you would want to do that, perhaps on page change, or something. 

    //clearInterval(interval); 
})();