모바일 플러그인 IScroll.js를 사용하는 방법

IScroll.js 플러그인은 모든 모바일 스크롤 막대 이벤트와 호환된다는 것을 알고 있습니다. 일부 Android 시스템에서는 overflo:scroll을 통해 스크롤 막대를 작동할 수 없지만 IScroll.js는 실제로 안전한 컨테이너 요소에서 처리될 수 있습니다. 스크롤, IScroll.js에 대해 자세히 소개하겠습니다.

참고

IScroll.js를 사용할 때 다음과 같은 3가지 수준의 요소 중첩이 있어야 합니다.

<div class="food-left">
    <ul class="food-nav">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul></div>

가장 바깥쪽 음식 왼쪽에는 position:relative; 및 overflow: Hidden이라는 두 가지 CSS 스타일이 있어야 합니다.

초기화

IScroll.js는 우리에게 IScrollconstructor;
다음과 같이 초기화했습니다.

<script type="text/javascript">
      leftScroll = new IScroll(".food-left");</script>

생성자에 전달된 실제 매개변수는 ES6의 새로운 querySelector 매개변수와 실제로 일치합니다.
참고: DOM 구조가 로드된 후에 초기화해야 합니다. 그렇지 않으면 유효하지 않습니다.

Settings

IScroll.js를 사용하면 두 번째 매개변수를 전달하여 스크롤 이벤트의 속성을 구성할 수 있습니다.

leftScroll = new IScroll(".food-left", {
       scrollbars: true,
       bounce: false,
       mouseWheel:true,
       click:true});

Scroll bar

scrollbars: true

스크롤 막대 표시 여부. 기본값은 false입니다.

fadeScrollbars:true

스크롤 막대 페이드 인 및 아웃 효과는 물론 스크롤 막대가 표시된다는 전제가 있습니다. 기본값은 false입니다.

interactiveScrollbars

스크롤 막대를 드래그할지 여부입니다. 기본값은 false입니다.

resizeScrollbars

스크롤 막대의 길이는 비례적으로 설정됩니다. 고정된 크기를 원할 경우 flase로 설정할 수 있습니다. 기본값은 true입니다. 스크롤이 컨테이너 경계에 도달합니다. 기본값은 true입니다.

bounce: false

활성화된 마우스 스크롤을 표시할지 여부는

mouseWheel:true

마우스 스크롤 활성화 후 역방향 스크롤을 활성화할지 여부입니다. 기본값은 false입니다. 원하는 경우 기본 마우스를 사용하세요. 기본값은 false입니다.

invertWheelDirection

IScrol은 기본적으로 모든 포인터 이벤트를 수신합니다. 프로젝트의 플랫폼을 확인하면 사용하지 않는 효과를 비활성화하여 리소스 사용량을 줄일 수 있습니다. 기본값은 false입니다.

click:true

스크롤 막대 초기 오프셋 위치를 설정합니다. 기본값은 없음입니다.

method

IScroll.js는 물론 모두 인스턴스 개체 아래에 있습니다.

네이티브
DOM 객체여야 하는 수신 요소의 위치로 스크롤합니다.

그런 다음 스크롤 시간은

disableMouse、disablePointer、options.disableTouch

어떤 위치로든 스크롤할 수 있습니다. 기본 위치는 0입니다. 이동하려면 설정해야 합니다. 음수;

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

노드j에서 xml2js를 사용하는 방법

node.js의 경로 모듈에 대한 자세한 설명

위 내용은 모바일 플러그인 IScroll.js를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!