2012-04-05 3 views
0

참고 : 나는 매우 비슷한 질문을하지만 모바일 웹은 젊고 변덕스럽고 2 년 된 토론은 구식 일 가능성이 높습니다.Android 브라우저에서 수직 스크롤 div를 만드는 가장 간단한 방법은 무엇입니까?

나는 안드로이드 브라우저에서 고정 스크롤 크기 을 제공함으로써 성취 될 간단한 스크롤 <div>을 만들려고합니다. 불행히도 모바일 웹킷 브라우저는 그 속성을 지원하지 않는 것 같습니다. 이 기능 또는 이와 동등한 기능을 어떻게 만들 수 있습니까?

가능한 경우 CSS 솔루션을 선호합니다. 나는 JavaScript 위젯 iScrollDojo Mobile lists을 보았습니다. 그러나 그것들은 제가하려고하는 것에 대해 과도한 것처럼 보입니다. iScroll 페이지에서는 "최신 안드로이드 버전이이 기능을 지원하고 있습니다 (지원은 최적이 아니지만)"라고 말하면서 안드로이드 4.0이이 문제를 해결했을지 궁금합니다.

+0

나는 당신이 이것을 순수한 CSS로 할 수 있다고 생각지 않는다. 당신은 그것을 처리 할 자바 스크립트 위젯이 필요하다. –

답변

1

많은 터치 장치를 사용하여 표준 터치 이벤트를 적용 해 보았습니다. 단지 단순한 해결책이라면 무게가있는 플러그인이 아닌 touchstarttouchmovetouchend 이벤트 위쪽으로 이동을 계산하고 scrollTop을 수정하면됩니다.

기기간에 표준 CSS 방식을 찾을 수 없지만 웹킷에 독점적 인 기능이있을 수 있습니다.

피씨 지난 3 개월 동안.

당신은 어떤 다른처럼 이러한 이벤트를 사용할 수 있습니다

[업데이트],

var startX = 0; 
var startY = 0; 
var ele = document.getElementById('myScrollableDiv'); 
ele.addEventListener('touchstart', function(ev){ 
    startX = ev.screenX; 
    startY = ev.screenY; 
}); 

ele.document.getElementById('myScrollableDiv').addEventListener('touchmove', function(ev){ 
    movementX = startX - ev.screenX; 
    movementY = startY - ev.screenY; 
    ele.style.scrollLeft = ele.style.scrollLeft + movementX; 
    ele.style.scrollTop = ele.style.scrollTop + movementY; 
    ev.preventDefault(); 
}); 

이 나는 ​​순간에 할 수없는 몇 가지 테스트를해야합니다 있도록이 메모리에서 완전히, 그리고 분 (jQuery에 있었지만)에 사용 된 코드가 없습니다. 이 방법은 결국 제대로 작동하지만 몇 가지 해결 방법이 있습니다. 잘하면 당신은 일할 수있는 요지만큼 충분합니다.

+0

나는 그 이벤트 유형에 익숙하지 않다. 간단한 예를 들어 주시겠습니까? –

관련 문제