thay đổi css trên cuộn kiện w/requestAnimation Khung

Question

Tôi muốn thay đổi màu nền của các yếu tố trong khung nhìn (sử dụng overflow: scroll)

Vì vậy, đây là nỗ lực đầu tiên của tôi: http://jsfiddle.net/2YeZG/

Như bạn thấy, có là một nhấp nháy ngắn của màu trước đó trước khi màu mới được vẽ. Số khác có had tương tự problems.

Tiếp theo HTML5 rocks instructions, tôi đã cố gắng để giới thiệu requestAnimationFrame để khắc phục vấn đề này không có kết quả:

http://jsfiddle.net/RETbF/

Tôi đang làm gì sai ở đây?

---

Dưới đây là một ví dụ đơn giản cho thấy cùng một vấn đề: http://jsfiddle.net/HJ9ng/

---

lỗi Filed với Chromium ở đây: http://code.google.com/p/chromium/issues/detail?id=151880

Answer 1

nếu nó chỉ là màu nền, cũng tại sao bạn không chỉ cần thay đổi màu nền gốc thành màu đỏ và một khi nó cuộn chỉ cần thay đổi nó thành màu hồng?

tôi thay đổi CSS của bạn vào đó

#dad 
{ 
    overflow-y: scroll; 
    overflow-x: hidden; 
    width: 100px; 
    height: 600px; 
    background-color:red; 
}​ 

tôi loại bỏ một số bạn Jquery và thay đổi nó để này

dad.bind('scroll', function() { 
    dad.css('background-color', 'pink'); 
}); 

Và tôi loại bỏ dòng này

iChild.css('backgroundColor', 'red'); 

Nhưng là Màu đỏ, điều quan trọng là sẽ không hoạt động chắc chắn http://jsfiddle.net/2YeZG/5/

Answer 2

Tôi thích Giải pháp của Manuel. Nhưng mặc dù tôi không hiểu chính xác những gì bạn đang cố gắng làm, tôi muốn chỉ ra một vài điều. Trong mã fiddle của bạn, tôi thấy rằng bạn bao gồm Shim của Paul Irish cho requestAnimationFrame. Nhưng bạn không bao giờ sử dụng nó. (Về cơ bản là một setTimeOut đáng tin cậy, không có gì khác) nó là từ hình động dựa trên khung.)

Vì bạn chỉ muốn thay đổi một số thuộc tính CSS, tôi không hiểu tại sao bạn cần nó. Ngay cả khi bạn muốn chuyển tiếp, bạn cũng nên dựa vào quá trình chuyển đổi CSS.

Ngoài ra mã của bạn có thể trông giống như

dad.bind('scroll', function() { 
    dad.css('background-color', 'pink'); 
    eachElemNameHere.css('background-color','randomColor'); 
}); 

Ngoài ra bạn nên lý tưởng không sử dụng một cái gì đó như thế nếu bạn có thể giúp nó. Bạn chỉ cần thêm và xóa tên lớp và thêm tất cả các thuộc tính này vào CSS của mình. Làm cho nó hoạt động nhanh hơn.

Ngoài ra, một lần nữa tôi không hiểu lắm, nhưng bạn có thể sử dụng hàm jQuery để tìm ra vị trí của từng phần tử từ trên cùng để có quyền kiểm soát tốt hơn.

Answer 3

Sự cố của bạn có vẻ là bạn chỉ thay đổi màu nền của các thành phần mà đã được cuộn vào chế độ xem. Mã của bạn hy vọng rằng trình duyệt chờ mã của bạn xử lý sự kiện cuộn trước khi trình duyệt vẽ lại chế độ xem của nó. Đây có lẽ không phải là sự đảm bảo được đưa ra bởi thông số HTML. Đó là lý do tại sao nó nhấp nháy.

Điều bạn nên làm thay vào đó là thay đổi các thành phần mà sẽ được cuộn vào chế độ xem. Điều này liên quan đến việc hiển thị tắt màn hình hoặc đệm đôi vì nó được gọi trong lập trình trò chơi trên máy tính. Bạn xây dựng cảnh của bạn khỏi màn hình và sao chép cảnh hoàn thành vào bộ đệm khung có thể nhìn thấy.

Tôi đã sửa đổi JSFiddle đầu tiên của bạn để bao gồm một số nhân cho chiều cao của vùng cuộn: http://jsfiddle.net/2YeZG/13/.

dad.bind('scroll', function() { 
    // new: query multiplier from input field (for demonstration only) and print message 
    var multiplier = +($("#multiplier")[0].value); 
    $("#message")[0].innerHTML=(multiplier*100)-100 + "% of screen rendering"; 

    // your original code 
    var newScrollY = newScrollY = dad.scrollTop(); 
    var isForward = newScrollY > oldScrollY; 
    var minVal = bSearch(bots, newScrollY, true); 

    // new: expand covered height by the given multiplier 
    //  multiplier = 1 is similar to your code 
    //  multiplier = 2 would be complete off screen rendering 
    var newScrollYHt = newScrollY + multiplier * dadHeight; 

    // your original code (continued) 
    var maxVal; 
    for (maxVal = minVal; maxVal < botsLen; maxVal++) { 
     var nxtTopSide = tops[maxVal]; 
     if (nxtTopSide >= newScrollYHt) { 
      break; 
     } 
    } 
    maxVal = Math.min(maxVal, botsLen); 
    $(dadKids.slice(minVal, maxVal)).css('background', 'pink'); 
}); 

Mã của bạn có hệ số 1, có nghĩa là bạn cập nhật các phần tử hiện có thể nhìn thấy (100% chiều cao vùng cuộn). Nếu bạn đặt hệ số thành 2, bạn sẽ hoàn thành việc cập nhật màn hình cho tất cả các phần tử của mình. Trình duyệt cập nhật đủ các phần tử cho màu nền mới để thậm chí một cuộn 100% sẽ hiển thị các phần tử được cập nhật. Vì trình duyệt hiếm khi cuộn 100% diện tích trong một bước (phụ thuộc vào hệ điều hành và phương thức cuộn!), Có thể đủ để giảm hệ số nhân, ví dụ: 1,5 (nghĩa là 50% tắt hiển thị màn hình). Trên máy tính của tôi (Google Chrome, Mac OS X có bàn phím cảm ứng), tôi không thể tạo bất kỳ nhấp nháy nào nếu hệ số nhân 1.7 trở lên.

BTW: Nếu bạn làm điều gì đó phức tạp hơn là chỉ thay đổi màu nền, bạn không nên lặp lại điều này. Thay vào đó, bạn nên kiểm tra xem phần tử đã được cập nhật và chỉ thực hiện thay đổi sau đó.