vue better-scroll을 위한 스크롤 플러그인 사용에 대한 자세한 설명

이번에는 vue better-scroll 스크롤 플러그인 사용에 대한 자세한 설명을 가져왔습니다. vue better-scroll 스크롤 플러그인 사용 시 주의사항은 무엇인가요? .

BetterScroll은 현재 최고의 모바일 스크롤 플러그인으로 알려져 있으므로 그 파워는 확실히 존재합니다. 그렇지 않으면...하하. 개인적으로 매우 유용하다고 생각합니다. 이 기사는 BetterScroll에 대한 일반적인 내용이 아니라 스크롤에 대한 자세한 내용을 알아보려면 여기를 방문하세요.

롤링 원리

스크롤이 더 좋은 것은 스크롤 원리

better-scroll은 모바일 측(PC는 이미 지원됨)의 다양한 스크롤 시나리오 요구 사항을 해결하는 데 초점을 맞춘 플러그인입니다. 핵심은 iscroll 구현을 기반으로 하며 iscroll을 기반으로 일부 기능을 확장하고 성능 최적화를 구현했습니다.

better-scroll은 기본 JS를 기반으로 구현되며 어떤 프레임워크에도 의존하지 않습니다. 컴파일된 코드 크기는 63kb, 압축 후 35kb, gzip 후에는 9kb에 불과합니다. 매우 가벼운 JS lib입니다.

녹색 부분은 상위 컨테이너인 래퍼이며 높이가 고정되어 있습니다. 노란색 부분은 상위 컨테이너의 첫 번째 하위 요소인 콘텐츠의 높이는 콘텐츠 크기에 따라 증가합니다. 그러다가 만족스러울 때 높이는 상위 컨테이너의 높이를 초과하지 않으며 스크롤할 수 없습니다. 상위 컨테이너의 높이를 초과하면 콘텐츠 영역을 스크롤할 수 있습니다. 가로 스크롤의 원리는 고정된 높이를 고정된 너비로 변경하는 것입니다. (여기서 너무 자세히 설명하지는 않겠습니다)

세로로 스크롤

더 이상 고민하지 않고 바로 코드로 넘어가겠습니다.

rreee

이것은 Vue BetterScroll 수직 스크롤 데모입니다. 여기서 주목해야 할 두 가지 사항이 있습니다.

1. 컨테이너인 상위 p 레이어는 하나만 있을 수 있습니다.

2. 부모 p는 오버플로 및 숨겨짐으로 설정되어야 하며 고정 높이를 가져야 합니다

가로 스크롤

가로 스크롤은 세로 스크롤에 비해 동적으로 스크롤 영역의 너비를 구하고 코드를 직접 입력해야 합니다.

rreee

사이드 스크롤링에는 주의가 필요합니다.

1. 컨테이너인 상위 p 레이어는 하나만 있을 수 있습니다.

2. 상위 컨테이너는 오버플로 숨김과 고정 너비를 설정해야 합니다.

3. 스크롤 영역의 너비를 동적으로 가져옵니다.

이 기사의 사례를 읽은 후 방법 등이 얼마나 흥미로웠는지, PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!

추천 도서:

vue에서 전체 선택 및 역선택

mint-ui 시간 플러그인 사용 시 선택 값을 얻는 방법

위 내용은 vue better-scroll을 위한 스크롤 플러그인 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!