2013-02-22 2 views
0

다음과 같은 문제가 있습니다. 인스턴트 메신저 간단한 jquery 플러그인을 사용하여 here 괜찮아요, 문제는 터치 장치 (예 : ipad2)에 그것을 테스트 할 때 해당 div 내에서 스크롤 할 수 없습니다. 그것은 2 손가락 스 와이프로도 작동하지 않습니다! "표준"스크롤바와 동작이 같지 않다고 생각합니다. 이 터치 할 수있는 솔루션이 있습니까? 몸 코드를 의미 테스트 단계에서사용자 정의 스크롤바가 터치 장치에서 작동하지 않습니다.

메신저,

$(document).ready(function() { 

function appenddiv() { 
    var $scrolling = $('<div id="test" class="scrolling">A lot of text in here ...<div id="scroll2"><img src="../images/31670035.jpg"></div></div>'); 


$scrolling.appendTo($('#container')).scrollbar(); 

} 

$('#scrollbar-link').on('click', function() { 
    appenddiv(); 
}); 
}); 

<body> 
<a href="#" id="scrollbar-link">Klick mich!</a> 

<div id="container"> 
</div> 
</body> 

내가 스크롤러를 슬쩍하는 것을 가능하게하는 "만질"스크립트 같은 것을 필요하십니까 매우 간단하다? 숨길 - 숨겨진 :
당신이 DIV 오버 플로우를 만들 필요가 사용자 정의 스크롤바를 만들려면 :

감사

+0

터치 이벤트를 사용하기 위해 제 3 자 라이브러리를 해킹한다는 의미입니다. 행운을 빕니다. – epascarello

+0

하지만 터치 장치에서 사용자 지정 스크롤바를 사용하는 사람은 없습니다. 메신저 그 어떤 새로운 방법을 열어, 나는 그 플러그인을 특히 원하지 않는다! – supersize

답변

1

예 :-), 이것은의 definetly 문제입니다 ...

루트 문제는이 다음과 같은 것이있다 sys 스크롤바. 괜찮습니다. 그러나 모바일 (iPad도 마찬가지 임) 장치에서 DIV는 스크롤 할 수 없습니다. 오버 플로우 (overflow)를 사용하면 (자동) ... (자동) ... 이것은 다소 논리적입니다. 그러나 .. 지금 :-)

그래서,이 시점에서 선택을해야 할 필요가있는 두통을 드라이브

A)는 터치 디바이스에서 사용자 지정 스크롤 막대를 잊지 - 오버 플로우를 유지 : 자동차가
b) & 드래그 기능을 수동으로 구현하면 휴대 기기를 감지 할 때

버전 b)가 까다로울 수 있습니다. 우리가 "mousedown"이벤트로 알고있는 이벤트가 터치 스크린에서 다르게 작동하기 때문입니다. 하나의 마우스가있을뿐만 아니라 사실 손가락으로 화면을 터치 한 다음 다른 손가락으로 화면을 터치하는 등의 "mousedown"배열이있을 수 있습니다. 터치 스크린에서는 터치입니다 [] 배열 ...

은 절대적으로 의미가 있지만, 일을 복잡하게합니다 ...

어느 쪽이든, 나는 덜 복잡한 해결책에 대해 모르겠다. 누구든지 그렇다면, 나는 그것에 대해서 너무 궁금해! ! 당신이 좋아하면 :-) 우리는 많은 테스트를했고,이 문제로 (너무 다른 문제에) 동안 우리의 NiceScrollbars library 프로젝트에서 일하고 많은 노력을

...

내가 여기 있어요 이 문제를 더 깊이 토론하십시오!

+0

자세한 답변을 주셔서 감사합니다. 말된다. 내 다른 옵션은 모든 웹킷 브라우저에서 꽤 잘 작동하는 CSS로 스크롤바 스타일을 지정하는 것입니다! 그러나 그것은 어쨌든 (즉 어쨌든) 파이어 폭스 나 오페라에서 작동하지 않는다는 것을 의미합니다! 하지만 어쩌면 이것은 당신의 대답이 될 수 있습니다. 주제에 관해서는 매우 도움이되는 기사 인 http : // css-tricks.com/webkit/custom-scrollbars-in-webkit/ 을 발견했습니다 : 드래그 앤 드롭 변형이 가능할 수 있다고 생각합니다. 그러나 나는 많은 돈을 투자하고 싶지 않습니다. 고객이 그만큼 돈을 내고 싶지 않기 때문에, 하하! – supersize

+0

지우기. :-) 네,이 정도면 충분하다면 CSS를 시도해 볼 수 있습니다. "크로스 브라우저로 만드십시오!" 문제. :-)하지만이 경우 어쩌면 버전 a)을 고려해야합니다! 정말! 필요한 것은 모바일 (또는 터치 스크린) 대 일반 브라우저를 감지 할 수 있어야합니다! –

+0

이것은 간단한 사용자 에이전트 감지 및 jquery UI로 수행됩니까? 그리고 드래그 가능한 "스크롤바 처리기"를 적용할까요? – supersize

0

어느 쪽이든을 돕기 위해 노력할 것입니다, 내가 덜 복잡한 솔루션 모르는 ... 사람 이하는 경우에, 나는 너무 대해 궁금 해요! :-)

이론적으로, 우리는 원본 DIV에서 불투명도 = 0.000000000001, Z- 인덱스 1 (-1 인덱스 사업부를 추가 할 수있다. 원래 DIV (10)의 Z- 색인, 즉 다음 새로운 div는 Z-index = 9)와 scroll = auto를가집니다. 새로운 div는 content와 css 측면에서 scroll = hidden 속성을 가진 div의 사본입니다.

숨겨진 div를 통해 스크롤 이벤트가 발생하고 표시되는 div가 업데이트됩니다.

너무 길어서는 안되지만 콘텐츠를 복제하거나 콘텐츠 높이를 보유하는 요소를 만들어야한다는 사실 외에도 또 다른 깨끗한 솔루션/해킹 인 것처럼 보입니다.

+0

그것이 작동하는 해결책이며 (크롬 안드로이드 4.4.4에서 테스트 된)이 바이올린을 통한 이론이 아니라는 증거 : http://jsfiddle.net/INF1/a2yy46rq/1/ – INF1

+0

JSFiddle이 작동하지 않습니다 ... –

관련 문제