숫자의 두 범위를 효율적으로 비교

Question

필자는 시차 스크롤링 코드 (필자는 알고 있습니다)를 만들고 있으며, 원활하게 실행되고 있지만 고급 유스 케이스가있는 걸림돌을 발견했습니다. Here's a demo.

이제 Chrome에서 부드럽고 60fps의 부드러운 사파리 & FF가되었는데, 이는 부분적으로 볼 때 요소 위치 만 업데이트하기 때문입니다.

을 경우 : 객체가이 같은 뷰에있는 경우 기본적으로

a = obj.offset + obj.height - winScroll, 
b = winHeight - (obj.offset - winScroll); 
if ((a <= winHeight && a >= 0) || (b <= winHeight && b >= 0)) { 

, 내가 확인 해요 : I는이 코드를 사용하여 확인 (의 main.js에서 발견 데모가 말했다) 또는 b가 0보다 크지 만 창의 높이보다 작 으면 표시됩니다.

이 기능은 창보다 작은 항목에 효과적이지만 큰 항목은 무엇입니까? 기본적으로, 숫자의 범위 (창의 상단과 창의 상단 사이의 높이 + 높이)를 다른 범위의 숫자 (개체의 오프셋과 오프셋)와 비교합니다. 물체의 높이 + 높이)와 같은 숫자가 있는지 확인하십시오.

나는 모든 프레임이있는 이미 붐비는 16ms에서 이것을 어떻게합니까?

Answer 1

(A)를 입증하는 한 가지 방법은 반증하는 것입니다 (¬A).

우선, 물체와 창이 사각형 좌표 시스템 값을 나타내는 4 개 특성 (left, right, top, bottom)로 각각 가정한다.

그리고 원점 O(0,0)이 창의 왼쪽 위 모서리이고, 양의 x 축이 오른쪽으로 확장되고 양의 y 축이 원점을 기준으로 아래쪽으로 확장한다고 가정합니다. 다음과 같은 문장의 경우에만 적어도 하나의에 해당하는 경우

목적은 보이지 않는입니다 :

• obj.left >= window.right
• obj.right <= window.left
• obj.top >= window.bottom
• obj.bottom <= window.top

,

or 문에서 이들을 연결하고 해당 부울 식의 결과를 무효화하십시오.