스크롤 및 관성 완화를 위한 HTML5 모바일 개발 코드 예제-H5 튜토리얼-php.cn

스크롤 및 관성 완화를 위한 HTML5 모바일 개발 코드 예제

黄舟

풀어 주다： 2017-03-27 15:23:22

원래의

2220명이 탐색했습니다.

1. 스크롤 다음은 세 가지 구현 방법입니다. 1) 기본 CSS 사용속성 overflow: 스크롤 p id= 상위 스타일 = 오버플로:scroll; pid='content' 콘텐츠 영역/p /p 주의: android에 버그가 있습니다. 이후에는 롤백됩니다. 스크롤 최상위 콘텐츠 영역에 도달하려면 후자의 두 가지 방법을 사용하여 2) js 프로그래밍 구현 아이디어를 달성하는 것이 해결책입니다. 화면에서 손가락이 이동하기 전과 후의 위치 변화를 비교하여 콘텐츠 요소 콘텐츠를 변경합니다

　1.Scroll

구현 방법은 다음 세 가지입니다.

1) 기본 CSS 속성을 사용하여 오버플로합니다. 스크롤

<div id="parent" style="overflow:scroll;>
    <div id=&#39;content&#39;>内容区域</div>
</div>

로그인 후 복사

주의 사항:

있습니다. 안드로이드의 버그이며 스크롤 후 롤백됩니다. 상위 콘텐츠 영역에 도달하려면 후자의 두 가지 방법을 사용하여

을 구현합니다. 2) js 프로그래밍을 사용하여

을 구현합니다. : 화면에서 손가락을 움직이기 전과 후의 위치 변화를 비교하여 콘텐츠 요소의 위치를 변경합니다

첫 번째 단계: 부모 오버플로를 숨김으로 설정하고, 콘텐츠 위치를 상대 위치로, 상단을 0으로 설정합니다. ;

두 번째 단계: 터치 이벤트 수신

var parent = document.getElementById(&#39;parent&#39;);

parent.addEventListener(&#39;touchstart&#39;, function(e) {
    // do touchstart
});
parent.addEventListener(&#39;touchmove&#39;, function(e) {
    // do touchmove
});
parent.addEventListener(&#39;touchend&#39;, function(e) {
    // do touchend
});

로그인 후 복사

세 번째 단계: 롤링 코드 구현

/**
 * 这里只实现垂直滚动
 */
var parent = document.getElementById(&#39;parent&#39;);
var content = document.getElementById(&#39;content&#39;)
var startY = 0; // 初始位置
var lastY = 0; // 上一次位置

parent.addEventListener(&#39;touchstart&#39;, function(e) {
    lastY = startY = e.touches[0].pageY;
});
parent.addEventListener(&#39;touchmove&#39;, function(e) {
    var nowY = e.touches[0].pageY;
    var moveY = nowY - lastY;
    var contentTop = content.style.top.replace(&#39;px&#39;, &#39;&#39;);
    // 设置top值移动content
    content.style.top = (parseInt(contentTop) + moveY) + &#39;px&#39;;
    lastY = nowY;

});
parent.addEventListener(&#39;touchend&#39;, function(e) {
    // do touchend
    var nowY = e.touches[0].pageY;
    var moveY = nowY - lastY;
    var contentTop = content.style.top.replace(&#39;px&#39;, &#39;&#39;);
    // 设置top值移动content
    content.style.top = (parseInt(contentTop) + moveY) + &#39;px&#39;;
    lastY = nowY;
});

로그인 후 복사

4단계: 최적화

코드는 PC보다 휴대폰에서 훨씬 더 잘 실행됩니다.

최적화 부분은 다음을 참조하세요.

3) iScroll4 프레임워크 사용

　var scroll = new iScroll(&#39;parent&#39;, {
　　hScrollbar: false,
　　vScrollbar: true,
　　checkDOMChanges : true
　　});

로그인 후 복사

2. 관성 완화

아이디어: 마지막 시간 동안 화면을 스와이프하는 손가락의 평균 속도 v를 취하고 v가 움직일 수 없거나 v<=이 될 때까지 감소 기능을 한 번 누르도록 합니다. 0

아아아아

위 내용은 스크롤 및 관성 완화를 위한 HTML5 모바일 개발 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!