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='content'>内容区域</div> </div>
주의 사항:
있습니다. 안드로이드의 버그이며 스크롤 후 롤백됩니다. 상위 콘텐츠 영역에 도달하려면 후자의 두 가지 방법을 사용하여
을 구현합니다. 2) js 프로그래밍을 사용하여
을 구현합니다. : 화면에서 손가락을 움직이기 전과 후의 위치 변화를 비교하여 콘텐츠 요소의 위치를 변경합니다
첫 번째 단계: 부모 오버플로를 숨김으로 설정하고, 콘텐츠 위치를 상대 위치로, 상단을 0으로 설정합니다. ;
두 번째 단계: 터치 이벤트 수신
var parent = document.getElementById('parent'); parent.addEventListener('touchstart', function(e) { // do touchstart }); parent.addEventListener('touchmove', function(e) { // do touchmove }); parent.addEventListener('touchend', function(e) { // do touchend });
세 번째 단계: 롤링 코드 구현
/** * 这里只实现垂直滚动 */ var parent = document.getElementById('parent'); var content = document.getElementById('content') var startY = 0; // 初始位置 var lastY = 0; // 上一次位置 parent.addEventListener('touchstart', function(e) { lastY = startY = e.touches[0].pageY; }); parent.addEventListener('touchmove', function(e) { var nowY = e.touches[0].pageY; var moveY = nowY - lastY; var contentTop = content.style.top.replace('px', ''); // 设置top值移动content content.style.top = (parseInt(contentTop) + moveY) + 'px'; lastY = nowY; }); parent.addEventListener('touchend', function(e) { // do touchend var nowY = e.touches[0].pageY; var moveY = nowY - lastY; var contentTop = content.style.top.replace('px', ''); // 设置top值移动content content.style.top = (parseInt(contentTop) + moveY) + 'px'; lastY = nowY; });
4단계: 최적화
코드는 PC보다 휴대폰에서 훨씬 더 잘 실행됩니다.
최적화 부분은 다음을 참조하세요.
3) iScroll4 프레임워크 사용
var scroll = new iScroll('parent', { hScrollbar: false, vScrollbar: true, checkDOMChanges : true });
2. 관성 완화
아이디어: 마지막 시간 동안 화면을 스와이프하는 손가락의 평균 속도 v를 취하고 v가 움직일 수 없거나 v<=이 될 때까지 감소 기능을 한 번 누르도록 합니다. 0
아아아아위 내용은 스크롤 및 관성 완화를 위한 HTML5 모바일 개발 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!