집 > 기사 > 웹 프론트엔드 > 오버플로 스크롤의 중요성은 무엇입니까?

오버플로 스크롤의 중요성은 무엇입니까?

php中世界最好的语言원래의: 2018-02-22 10:07:412275검색

이번에는 overflow 스크롤링의 중요성과 notes에 대해 알아보겠습니다. 실제 사례를 살펴보겠습니다.

Principle

블록 수준 범위 오버플로 효과를 설정하려면 외부 블록 위치에 Overflow:scroll 및 height:xx만 설정하면 됩니다.

이때, 블록 수준 범위의 콘텐츠 변위가 외부 블록의 변위를 초과하면 내부 블록이 스크롤되면 스크롤 효과를 볼 수 있습니다. 여기에는 두 가지 구현 방법이 있습니다. 상위 요소(외부 블록이라고 함)에 대한 설정(상위:0 및 하위:0)은 스크롤 영역을 수정할 수 있습니다. 상위 요소의 높이를 xx로 설정하는 다른 방법도 있습니다. 스크롤 효과를 완료합니다.

표시되는 스크롤 막대가 브라우저 가장자리의 스크롤 막대라면 스크롤 이벤트가 바인딩되지 않았다는 의미입니다.

과거에는 텍스트 내용이 노출되는 것을 방지하고 자식 요소의 리소스를 부모 요소로부터 격리하기 위해 사용했습니다. http 포트를 통해 포함된 데이터 내용에 액세스하려는 경우 일반적으로 이 방법을 사용합니다. 데이터를 로드할 때 사용자가 해당 위치로 마우스를 스크롤하는 경우에만 데이터가 동기적으로 로드됩니다. 예를 들어 페이지의 목록 데이터를 백그라운드에서 가져오고 업데이트된 데이터는 ajax를 통해 HTML로 동기화됩니다. 시각적 교차 기능인 스크롤 바인딩 이벤트의 역할도 있습니다.

Scroll 이벤트

오버플로 스크롤에는 overflow-x 및 overflow-y가 포함되며 오버플로는 초과된 부분을 직접 스크롤합니다. 그러나 가로 스크롤과 세로 스크롤의 효과는 너비와 높이에 따라 다릅니다. 다른 스크롤이벤트 처리를 수행합니다.

세 개의 키

오버플로 스크롤 이벤트 처리, 세 가지 핵심 요소를 CSS에 작성해야 합니다. 하나는 position:절대, 두 번째는 오버플로:스크롤, 세 번째는 상단:변위, 하단:변위(또는 높이)입니다. ), 구성 요소에서 다른 이벤트를 호출할 때 오버플로 스크롤 효과를 사용하면 구성 요소가 더욱 다채로워집니다.

End

overflow:scroll과 높이 또는 위쪽과 아래쪽을 설정하는 것을 잊어버린 경우 항상 여기에서 우회할 수 있으므로 스크롤 바인딩 이벤트를 방지하려면 오버플로와 변위를 설정해야 합니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!