스크롤을 사용하여 컨테이너 위치를 조정하십시오.

Question

div 컨테이너의 요소 세트가 뷰포트에 항상 존재하도록 시도하고 있습니다. 여러 가지 접근법을 시도했지만 문제를 다시 그리는 것처럼 보입니다.

질문 : 성능을 향상시키고 눈에 띄는 부작용을 제거하는 주요 최적화 기능은 무엇입니까? 그렇지 않다면 어떤 다른 방법으로 접근합니까?

첫 번째 접근 방식은 :

$(viewport).scroll(function() 
    { 
     m_grid.css({ 'marginTop': viewport.scrollTop() + 'px' }); 
    }) 

이 하나는 사용자에게 분명 작은 흔들림 효과가 발생합니다.

두 번째 방법 :

• 장소 아래의 내용물 위 사업부, 축소 및 스크롤 컨테이너의 사용되지 않는 공간을 채우기 위해 약간의 기초적인 수학로를 확장합니다.

이 방법의 문제점은 일정한 크기 조정으로 인해 콘텐츠 가장자리에서 깜박임이 발생한다는 것입니다.

세 번째 방법 :

• 장소 원래의 스크롤이 실제 컨테이너로 전달이 이벤트를 스크롤 한 후 단순 바인딩 될 경우 바로 위에 스크롤 동작을 모방 사업부.

실제로이 스크롤을 수행하는 div는 가짜이므로 마우스 휠은 뷰포트의 요소 위로 마우스를 가져갈 때 포커스가 없으므로 쓸모 없게됩니다.

개선이나 대체 접근법에 대한 의견이 있으십니까? 성과 중심적이어야합니다.

Answer 1

이 경우 JavaScript가 필요하지 않습니다. CSS를 사용하면이 작업을 수행 할 수 있습니다. 예를 들어 :

#viewport { 
    position: relative; 
} 

#m_grid { 
    position: fixed; 
    top: 0px; 
} 

데이비드 월시는 행동 position: fixed의 demo page 있습니다.