2013-02-22 3 views
0

iScroll div에서 화면 이동 막대를 표시하거나 숨길 수있는 호버 기능을 구현하려고합니다. 사용자가 div 위에 마우스를 올려 놓고 스크롤바가 나타나게하고 사용자가 마우스를 컨테이너 바깥쪽으로 옮기면 스크롤 막대가 사라집니다.iScroll hide/show scrollbar

나는 가능한 한 havent가 솔루션을 찾으려고 많은 행운을 보았는지 알아보기 위해 이것을 조사 해왔다. 나는 iScroll에 새로운 iScroll 객체를 초기화 할 때 설정할 수있는 hideScrollbar 매개 변수가 있지만 스크롤 컨테이너와의 사용자 상호 작용을 기반으로 매개 변수를 동적으로 설정하는 방법을 완전히 알지 못한다는 사실을 발견했습니다.

도움을 주시면 감사하겠습니다.

답변

1

위에서 언급 한 것처럼 파라미터 hideScrollbar을 찾을 수없는 것 같지만,이 방법을 사용하면 쉽게 페이드 애니메이션을 추가 할 수 있습니다.

예.

$('#DivToHover').hover(
    function(){ 
     $('#ScrollBarDiv').fadeIn("fast"); 
    }, 
    function(){ 
     $('#ScrollBarDiv').fadeOut("fast"); 
    } 
); 

그러나 모바일 장치에서이 정보를 볼 수 있으려면 일부 문제가 발생할 수 있습니다.

편집

변경 라인 35을.

isIDevice = (/iphone|ipad|Mozilla/gi).test(navigator.appVersion),

편집 2 이 다시 더 좋은 방법에 대해 생각하는 것은 (/iphone|ipad/gi) 같이 라인 (35)을두고하는 것입니다. 그러나 줄을 바꾸십시오133을 ...

hideScrollbar: isIDevice && !isIDevice, 
fadeScrollbar: isIDevice && !isIDevice && has3d, 
+0

https://github.com/cubiq/iscroll/blob/master/src/iscroll.js로 이동하여 112 행을 보면 매개 변수를 볼 수 있습니다. 나는 당신의 솔루션에 그것이 작동하는지 확인하려고 노력할 것이다. 감사. – Guest123894

+0

아아아, 나는 그걸 보지 못했다. 그래서 Ideide는 iPhone과 iPads (''/ iphone | ipad/gi) .test (navigator.appVersion)' '를 참조하고있다. 그래서 가장 쉬운 방법은 다른 모든 것들을 참조하는 것이다. 브라우저에서도 마찬가지입니다. 대체 솔루션에 대한 편집을 참조하십시오. – dev

+0

모질라가 더 필요 하겠지만 다른 appVersion 이름을 추적하는 것이 어렵다고 생각합니다. – dev

2

아래 코드는 원하는 것을 제공합니다. :) (테스트 한 데스크탑 & Android & iOS);

hideScrollbar: !isIDevice || isIDevice || isAndroid, 
fadeScrollbar: !isIDevice || isIDevice && has3d, 

이것은 112-113 전에 언급 된 vletech와 같은 줄입니다.