iScroll을 기반으로 콘텐츠 스크롤 효과 구현
이 글은 주로 iScroll을 기반으로 한 콘텐츠 스크롤 효과를 자세히 소개하며, 관심 있는 친구들은 참고할 수 있습니다.
1. iScroll 소개
iScroll은 웹 앱 스크롤 컨트롤을 위한 웹 앱입니다. 기본 IOS 애플리케이션에서 스크롤 목록 작업을 시뮬레이션할 수 있으며 확대/축소, 당겨서 새로 고침, 정확한 요소 캡처 및 사용자 정의 스크롤 막대와 같은 기능을 구현할 수도 있습니다. 여기 블로거가 사용하는 버전은 iScroll4.25입니다. 최신 버전은 공식 웹사이트에서 다운로드할 수 있습니다.
공식 홈페이지 주소 : http://iscrolljs.com/
2. iScroll 사용법
1.iScroll 사용 구조
일반적으로 iScroll을 사용하기 위한 최적의 구조는 다음과 같습니다.
HTML :
<p id="wrapper">
<p id="scroller">
<ul>
<li></li>
...
</ul>
<ul>
<li></li>
...
</ul>
</p>
</p>참고: 1. iScroll이 효과를 얻으려면 스크롤하는 콘텐츠 외부의 래퍼에 연결해야 합니다.
2. 래퍼의 첫 번째 하위 요소만 스크롤할 수 있습니다.
2. iScroll 인스턴스화
iScroll은 호출하기 전에 인스턴스화되어야 합니다. 인스턴스화 코드는 다음과 같습니다(head 태그에 다음 코드 추가):
<script src="iscroll.js"></script>
<script>
var myscroll;//myscroll是全局变量，可以任意地方调用
function loaded(){
myscroll = new iScroll("wrapper");
}
window.addEventListener("DOMContentLoaded",loaded,false);
</script>3. 롤링 테스트 예시
HTML+CSS:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="iscroll-4.2.5fix.js"></script><!--引入js包-->
<!--实例化iScroll-->
<script type="text/javascript">
var myscroll;
function loaded(){
myscroll = new iScroll("wrapper");
}
window.addEventListener("DOMContentLoaded",loaded,false);
</script>
<!--CSS样式设置-->
#wrapper {
position:absolute; z-index:1;
top:45px; bottom:48px; left:0;
width:100%;
background:#aaa;
overflow:auto;
}
#scroller {
position:relative;
/* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
float:left;
width:100%;
padding:0;
}
#scroller ul {
position:relative;
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
#scroller li {
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}
#scroller li > a {
display:block;
}
</style>
<title>滚动测试</title>
</head>
<body>
<p id="wrapper">
<p id="scroller">
<ul id="thelist">
<li>Pretty row 1</li>
<li id="aaa">Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
<li>Pretty row 6</li>
<li>Pretty row 7</li>
<li>Pretty row 8</li>
<li>Pretty row 9</li>
<li>Pretty row 10</li>
<li>Pretty row 11</li>
<li>Pretty row 12</li>
<li>Pretty row 13</li>
<li>Pretty row 14</li>
<li>Pretty row 15</li>
<li>Pretty row 16</li>
<li>Pretty row 17</li>
<li>Pretty row 18</li>
</ul>
</p>
</p>
</body>
</html>4. 실행 효과
블로거는 이제 막 iScroll의 가장 기본적인 기능을 배우기 시작했습니다. 당겨서 새로고침 및 기타 기능을 사용해 보세요.
위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사 : ajax 양식 제출 및 배경 처리 기반의 단순 응용 프로그램 ajax html
에 기반한 파일 업로드 기술의 업로드 및 미리보기의 간단한 구현.
위 내용은 iScroll을 기반으로 콘텐츠 스크롤 효과 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7487
15
1377
52
77
11
51
19
19
39
iPhone에서 민감한 콘텐츠 경고를 활성화하고 해당 기능에 대해 알아보는 방법
Sep 22, 2023 pm 12:41 PM
특히 지난 10년 동안 모바일 장치는 친구 및 가족과 콘텐츠를 공유하는 주요 방법이 되었습니다. 접근하기 쉽고 사용하기 쉬운 인터페이스와 실시간으로 이미지 및 비디오를 캡처할 수 있는 기능은 콘텐츠 제작 및 공유를 위한 탁월한 선택입니다. 그러나 악의적인 사용자가 이러한 도구를 악용하여 보기에 적합하지 않고 사용자의 동의가 필요하지 않은 원치 않는 민감한 콘텐츠를 전달하기 쉽습니다. 이러한 일이 발생하지 않도록 iOS17에는 "민감한 콘텐츠 경고"라는 새로운 기능이 도입되었습니다. 이에 대해 살펴보고 iPhone에서 사용하는 방법을 살펴보겠습니다. 새로운 민감한 콘텐츠 경고는 무엇이며 어떻게 작동하나요? 위에서 언급한 것처럼 민감한 콘텐츠 경고는 사용자가 iPhone을 포함한 민감한 콘텐츠를 보지 못하도록 설계된 새로운 개인 정보 보호 및 보안 기능입니다.
360 탐색으로 열리도록 Microsoft Edge 브라우저를 변경하는 방법 - 360 탐색으로 열기를 변경하는 방법
Mar 04, 2024 pm 01:50 PM
Microsoft Edge 브라우저에서 360 탐색 페이지를 여는 페이지를 변경하는 방법은 실제로 매우 간단하므로 이제 Microsoft Edge에서 360 탐색 페이지를 여는 페이지를 변경하는 방법을 공유하겠습니다. 브라우저가 필요한 친구가 모두를 도울 수 있기를 바랍니다. Microsoft Edge 브라우저를 엽니다. 아래와 같은 페이지가 보입니다. 오른쪽 상단에 있는 점 3개 아이콘을 클릭하세요. '설정'을 클릭하세요. 설정 페이지의 왼쪽 열에서 "시작 시"를 클릭하세요. 오른쪽 열의 그림에 표시된 세 지점을 클릭한 다음("새 탭 열기"를 클릭하지 마세요), 편집을 클릭하고 URL을 "0"(또는 기타 의미 없는 숫자)으로 변경하세요. 그런 다음 "저장"을 클릭하세요. 다음으로 '를 선택하세요.
JavaScript에서 지정된 요소 위치로 스크롤을 구현하는 방법은 무엇입니까?
Oct 22, 2023 am 08:12 AM
JavaScript에서 지정된 요소 위치로 스크롤하는 기능을 구현하는 방법은 무엇입니까? 웹 페이지에서 특정 요소 위치에 사용자의 주의를 집중시켜야 할 때 JavaScript를 사용하여 지정된 요소 위치로 스크롤하는 기능을 구현할 수 있습니다. 이 기사에서는 JavaScript를 통해 이 기능을 구현하는 방법을 소개하고 해당 코드 예제를 제공합니다. 먼저, 대상 요소의 위치 정보를 얻어야 합니다. Element.getBoundingClient를 사용할 수 있습니다.
HTML, CSS, jQuery: 자동 스크롤 게시판 만들기
Oct 27, 2023 pm 06:31 PM
HTML, CSS 및 jQuery: 자동으로 스크롤되는 게시판 만들기 현대 웹 디자인에서 게시판은 중요한 정보를 전달하고 사용자의 관심을 끌기 위해 자주 사용됩니다. 자동 스크롤 게시판은 웹 페이지에서 널리 사용되며 게시판 내용을 애니메이션 형태로 페이지에 스크롤하여 표시하여 정보 표시 효과와 사용자 경험을 향상시킵니다. 이번 글에서는 HTML, CSS, jQuery를 활용해 자동 스크롤 게시판을 만드는 방법을 소개하고, 구체적인 코드 예시를 제공하겠습니다. 먼저 HT가 필요합니다.
iframe 스크롤 동작 모니터링
Feb 18, 2024 pm 08:40 PM
iframe의 스크롤을 모니터링하려면 특정 코드 예제가 필요합니다. iframe 태그를 사용하여 웹 페이지에 다른 웹 페이지를 삽입할 때 때때로 iframe의 콘텐츠에 대해 몇 가지 특정 작업을 수행해야 합니다. 일반적인 요구 사항 중 하나는 스크롤이 발생할 때 해당 코드가 실행될 수 있도록 iframe의 스크롤 이벤트를 수신하는 것입니다. 다음에서는 JavaScript를 사용하여 iframe의 스크롤을 모니터링하는 방법을 소개하고 참조용 특정 코드 예제를 제공합니다. iframe 요소를 얻으세요. 먼저, 우리가 필요로 하는 것은
중국어로 치트 엔진을 설정하는 방법은 무엇입니까? 치트 엔진 설정 중국어 방식
Mar 13, 2024 pm 04:49 PM
CheatEngine은 게임의 메모리를 편집하고 수정할 수 있는 게임 편집기입니다. 그러나 기본 언어는 중국어가 아니므로 많은 친구들에게 불편을 줍니다. 그렇다면 CheatEngine에서 중국어를 설정하는 방법은 무엇입니까? 오늘은 에디터가 CheatEngine에서 중국어를 설정하는 방법에 대해 자세히 소개하겠습니다. 도움이 되셨으면 좋겠습니다. 설정 방법 1: 1. 두 번 클릭하여 소프트웨어를 열고 왼쪽 상단에 있는 "편집"을 클릭합니다. 2. 그런 다음 아래 옵션 목록에서 "설정"을 클릭하세요. 3. 열리는 창의 왼쪽 열에서 "언어"를 클릭하세요.
Microsoft Edge에서 다운로드 버튼을 설정하는 위치 - Microsoft Edge에서 다운로드 버튼을 설정하는 방법
Mar 06, 2024 am 11:49 AM
다운로드 버튼을 표시하도록 Microsoft Edge가 어디에 설정되어 있는지 알고 계시나요? 아래에서 편집기를 통해 다운로드 버튼을 표시하도록 설정하는 방법을 알려드리겠습니다. 1단계: 먼저 Microsoft Edge Browser를 열고 아래 그림과 같이 오른쪽 상단에 있는 [...] 로고를 클릭합니다. 2단계: 그런 다음 아래 그림과 같이 팝업 메뉴에서 [설정]을 클릭합니다. 3단계: 그런 다음 아래 그림과 같이 인터페이스 왼쪽에 있는 [모양]을 클릭합니다. 4단계: 마지막으로 [다운로드 버튼 표시] 오른쪽에 있는 버튼을 클릭하면 아래 그림과 같이 회색에서 파란색으로 변경됩니다. 위는 편집기가 Microsoft Edge에서 다운로드 버튼을 설정하는 방법을 제공하는 곳입니다.
Vue에서 전체 화면 스크롤 효과를 구현하는 방법
Nov 08, 2023 am 08:42 AM
Vue에서 전체 화면 스크롤 효과를 얻는 방법 웹 디자인에서 전체 화면 스크롤 효과는 사용자에게 매우 독특하고 부드러운 탐색 경험을 제공할 수 있습니다. 이 글에서는 Vue.js에서 전체 화면 스크롤 효과를 얻는 방법과 구체적인 코드 예제를 소개합니다. 전체 화면 스크롤 효과를 얻으려면 먼저 Vue.js 프레임워크를 사용하여 프로젝트를 빌드해야 합니다. Vue.js에서는 vue-cli를 사용하여 프로젝트 뼈대를 빠르게 구축할 수 있습니다. 그런 다음 전체 페이지와 같은 스크롤 효과를 얻기 위해 일부 타사 라이브러리를 도입해야 합니다.
