제품 기능을 소개하기 위해 단일 페이지를 만들어야 하는 경우가 있는데, 단일 페이지에 내용이 많고 페이지가 매우 깁니다. 제품 기능 노드를 빠르게 찾기 위해 js를 사용하여 사용자의 의견을 듣습니다. 휠 이벤트. 사용자가 휠 슬라이드를 실행하거나 제스처를 사용할 때 화면을 터치하고 슬라이드하면 해당 노드를 찾을 수 있습니다. Scrollify라는 jQuery 플러그인이 이를 수행하는 데 도움이 됩니다.
Scrollify를 구현하려면 jQuery 1.6과 버퍼 애니메이션 완화 플러그인이 필요합니다. HTML의 기본 구조는 다음과 같습니다.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>scrollify</title> <!--[if lt IE 9]> <script src="html5shiv.min.js"></script> <![endif]--> <script src="jquery.js"></script> <script src="jquery.easing.min.js"></script> <script src="jquery.scrollify.min.js"></script> <script> $(function() { $.scrollify({ section : "section", }); }); </script> </head> <body> <section></section> <section></section> </body> </html>
다음은 scrollify의 기본 옵션 구성입니다.
$.scrollify({ section : "section", sectionName : "section-name", easing: "easeOutExpo", scrollSpeed: 1100, offset : 0, scrollbars: true, before:function() {}, after:function() {} });
옵션 설명:
섹션: 노드 섹션 선택기
sectionName: 각 섹션 노드에 해당하는 데이터 속성
easing: 버퍼 애니메이션을 정의합니다.
offset: 각 색상 노드의 오프셋을 정의합니다.
scrollbars: 스크롤바 표시 여부.
before: 스크롤이 시작되기 전에 실행되는 콜백 함수입니다.
after: 스크롤이 완료된 후 실행되는 콜백 함수
Scrollify는 다음과 같은 메소드 호출도 제공합니다.
$.scrollify("move","#name");
위 코드는 #name 노드로 직접 스크롤할 수 있습니다.
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.