트리거 iScroll 4 특정 클래스

iScroll4 그러나 ID '래퍼'인 요소가 있다고 가정 이러한 방식으로트리거 iScroll 4 특정 클래스

$(document).ready(function() { 
       var myScroll; 
       myScroll = new iScroll('wrapper');    
      });

에 트리거 스크립트의 모든 요소. 클래스 이름이 "스크롤 가능"인 모든 요소에서이 작업을 트리거하고 싶습니다. 이 스크립트의 플러그인에서이 작업을 수행 한 것을 보았습니다. 어떤 아이디어가 여기에서 그것을하는 방법? ...

출처

2011-09-28 Robin Knight

당신은 같은 클래스와 다른 ID를 할당 할 수 있습니다 "스크롤"및

$(document).ready(function() { 
    //Created an array for adding n iScroll objects 
    var myScroll = new Array(); 

    $('.scrollable').each(function(){ 
     id = $(this).attr('id'); 
     myScroll.push(new iScroll(id)); 
    }); 
});

출처

2011-09-28 14:18:21 Franz

이 그것을해야 –

거의 작품 도움이 될 수 있지만, 그래서 하나 개의 패널이 작동 지금 내 스크롤 하나 이상의 화신이있다. 이것은 가변 변수를 갖는 문제이므로 본질적으로 내가 다시 게시 할 별도의 질문입니다. –

"스크롤 가능"클래스는 스크롤해야하는 항목입니까? 이 경우 부모 div에 "iscroll"을 적용해야합니다. – Franz

나는 Mobile Site: Lack of horizontal scrolling on iPhone

jQuery를하고 iScroll을 사용하여, 당신은 다음을 할 수 있다고 대답했습니다 :

HTML :

<html><head> 
<title>Test</title> 
<!-- include jquery and iscroll --> 
</head><body> 

<div id="divPretendingIsDeviceScreen" style="max-width:320px;overflow:hidden;"> 
    <h1>Header</h1> 
    Lorem ipsum dolor sit amet. 
    <br/><br/> 
    <h2>Another header</h2> 
    text text:<br/> 
    <br/> 
    <div class="divToBeScrolled"> 
     div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br /> 
    </div> 
    <h2>Another header</h2> 
    text text:<br/> 
    <br/> 
    <div class="divToBeScrolled"> 
     div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br /> 
    </div> 
    <h2>Another header</h2> 
    text text:<br/> 
    <br/> 
    <div class="divToBeScrolled"> 
     div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br /> 
    </div> 
    <h2>Another header</h2> 
    text text:<br/> 
    <br/> 
    <div class="divToBeScrolled"> 
     div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br /> 
    </div> 
    <br/> 
    <br/> 
    Lorem ipsum dolor sit amet. 
</div> 
</body></html>

CSS :

<style type="text/css"> 
    .scrollerType { 
     overflow:hidden; 
     max-height:200px; 
     /* put max height you want the scroller div to have, 
     normally less than the device's window size, like 200px or so so.*/ 
    } 

    div.divToBeScrolled { 
     overflow:scroll; 
     display:block; 
    } 
</style>

JS/JQuery와는 :

<script charset="utf-8" type="text/javascript"> 
    var snippetName = new Array(); //creates a new array to make the var names for iscroll 
    var selfId = new Array(); //creates a new array to make the names for the scrollers 

    $('.syntaxhighlighter').each(function(index) { //for each '.syntaxhighlighter' and 'index' as counter 
     selfId[index] = 'scrollerId'+index; //creating a new id name for the container 
     $(this).wrap('<div id='+selfId[index]+' class="scrollerType" />'); //wrapping each '.syntaxhighlighter' with the container 
     var timeout = setTimeout(function(){ //yes, timeout. This to support Android mostly 
      snippetName[index] = new iScroll(selfId[index], { //initializing multiple iscroll's each with an index and targeting the selfId 
       //here you declare various options - see "Passing parameters to the iScroll" at iScroll page 
       //this is the best set, i think 
       snap: false, 
       momentum: true, 
       hScrollbar: false, 
       vScrollbar: false, 
       hScroll: true, 
       vScroll: true, 
       desktopCompatibility:true 
      }); //end new iScroll 
     },100); //100ms just bc 0ms or 1ms might not be enough 

    }); //end .each 
</script>

이 내가 지적했습니다 다른 질문에 대한 test-case (http://portableideas.net/myRepo/trunk/stackoverflow/www/questions_7869572.html)입니다.

출처

2011-11-22 18:07:08 RaphaelDDL

이것은 나에게 정말로 유용했습니다. 감사! 나는 아직도 질문이있다. 어떻게 그 모든 iscrolls에 refresh()를 동시에 적용 할 수 있습니까? 일반적으로 다음과 같습니다. myScroll.refresh(); – Alvaro

나는 내 대답을 얻었다. 내가 한 일이다. (i = 0; i Alvaro

@Alvaro 다행 이었기 때문에 유용했습니다. 제안으로'number_of_iscroll_elements'을'snippetName.length'로,'i = 0'을'i = 1'로 변경하십시오. (길이가 1에서 0이 아니기 때문에) 당신이 바꿀 때마다 번호를 넣을 필요가 없습니다. 두루마리의 수.나는 아직 이것을 시험해 보았지만 일할 것이라 확신한다. – RaphaelDDL

저는 Writting 할 때부터 2 년 전의 대화입니다. StackOverflow가 아직 살아 있다면이 대화는 계속됩니다.

검색 엔진을 통해 비슷한 문제가 있었으므로이 대화에 연결되었습니다.

그러나 이들 중 어느 것도 내 문제를 해결하지 못합니다. 프란츠 생각에 내 자신의 아이디어 건물에서

쉽게이 같은 완벽하고 간단한 해결책 acheive 수 :

var contentToScroll; 
var idNum=1; 
    $('.scrollable').each(function(){ 

//e.g <li class="scrollable" id="conT1"> Contents</li> 
//<li class="scrollable" id="conT2"> Contents</li> e.t.c 

    $(this).attr("id", 'conT'+idNum);//assign ids here 
     var id = $(this).attr('id'); 
     idNum++; 
     contentToScroll=new IScroll('#'+id,{scrollbars: true}); 
    });

동적으로 개별적으로 아이디를 예상 scollable 요소에를 할당하고 iScroll5 말을 그들을 scrollabile하게하기 위해.

이 .... 사람

출처

2014-09-08 13:33:07 ShapCyber

이 코드는 두 번째 (또는 모든 것부터 첫 번째)'.scrollable' div 내용이 아래에 더 많은 공백을 갖도록 만듭니다. 그러나 창 크기가 조정되면 정상으로 이동합니다. –

답변

관련 문제