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입니다.

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

세로로 스크롤

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

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

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

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

가로 스크롤

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

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

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

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

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

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

추천 도서:

vue에서 전체 선택 및 역선택

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

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