爲什麼iScroll未初始化？

Question

我想讓iScroll爲我的webapp工作（不幸的是，本地滾動並沒有做到我所需要的一切）。我必須初始化它，因爲它現在只是禁用滾動。出了什麼問題？

var myScroll; 
 
$(document).ready(function() { 
 
    setTimeout(function() { 
 
     myScroll = new IScroll('#page-content-wrapper', { 
 
      probeType: 3, 
 
      mouseWheel: true, 
 
      tap: true, 
 
      scrollbars: true 
 
     }); 
 
    }, 300); 
 
});

<script src="https://raw.githubusercontent.com/cubiq/iscroll/master/build/iscroll-probe.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
<div id="page-content-wrapper"> 
 
    <div class="container"> 
 
    <div class="row page-header"> 
 
     <div class="col-sm-12 col-md-5 col-md-offset-2"> 
 
     <h2>Breakfast menu</h2> </div> 
 
     <div class="row"> 
 
     <div class="col-sm-12 col-md-8 col-md-offset-2"> 
 
      <ul class="list-group"> 
 
      <li class="list-group-item">A cool list item!</li> 
 
      <li class="list-group-item">A cool list item!</li> 
 
      <li class="list-group-item">A cool list item!</li> 
 
      <li class="list-group-item">A cool list item!</li> 
 
      <li class="list-group-item">A cool list item!</li> 
 
      <li class="list-group-item">A cool list item!</li> 
 
      <li class="list-group-item">A cool list item!</li> 
 
      <li class="list-group-item">A cool list item!</li> 
 
      <li class="list-group-item">A cool list item!</li> 
 
      <li class="list-group-item">A cool list item!</li> 
 
      <li class="list-group-item">A cool list item!</li> 
 
      <li class="list-group-item">A cool list item!</li> 
 
      <li class="list-group-item">A cool list item!</li> 
 
      <li class="list-group-item">A cool list item!</li> 
 
      <li class="list-group-item">A cool list item!</li> 
 
      <li class="list-group-item">A cool list item!</li> 
 
      <li class="list-group-item">A cool list item!</li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://raw.githubusercontent.com/cubiq/iscroll/master/build/iscroll-probe.js"></script>

Answer 1

所以，我覺得我對你的解決方案，希望它可以幫助！：

var myScroll; 
 

 
$(window).load(function() { 
 
    setTimeout(function() { 
 
     myScroll = new IScroll('#page-content-wrapper', { 
 
      probeType: 3, 
 
      mouseWheel: true, 
 
      tap: true, 
 
      scrollbars: false 
 
     }); 
 
    }, 300); 
 
});

* { 
 
     -webkit-box-sizing: border-box; 
 
     -moz-box-sizing: border-box; 
 
     box-sizing: border-box; 
 
    } 
 
    
 
    html { 
 
     -ms-touch-action: none; 
 
    } 
 
    
 
    body, 
 
    ul, 
 
    li { 
 
     padding: 0; 
 
     margin: 0; 
 
     border: 0; 
 
    } 
 
    
 
    body { 
 
     font-size: 12px; 
 
     font-family: ubuntu, helvetica, arial; 
 
     overflow: hidden; 
 
     /* this is important to prevent the whole page to bounce */ 
 
    } 
 
    
 
    #wrapper { 
 
     position: absolute; 
 
     z-index: 1; 
 
     top: 0; 
 
     bottom: 0; 
 
     left: 0; 
 
     width: 50%; 
 
     background: #ccc; 
 
     overflow: hidden; 
 
    } 
 
    
 
    #scroller { 
 
     position: absolute; 
 
     z-index: 1; 
 
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
 
     width: 100%; 
 
     -webkit-transform: translateZ(0); 
 
     -moz-transform: translateZ(0); 
 
     -ms-transform: translateZ(0); 
 
     -o-transform: translateZ(0); 
 
     transform: translateZ(0); 
 
     -webkit-touch-callout: none; 
 
     -webkit-user-select: none; 
 
     -moz-user-select: none; 
 
     -ms-user-select: none; 
 
     user-select: none; 
 
     -webkit-text-size-adjust: none; 
 
     -moz-text-size-adjust: none; 
 
     -ms-text-size-adjust: none; 
 
     -o-text-size-adjust: none; 
 
     text-size-adjust: none; 
 
    } 
 
    
 
    #scroller ul { 
 
     list-style: none; 
 
     padding: 0; 
 
     margin: 0; 
 
     width: 100%; 
 
     text-align: left; 
 
    } 
 
    
 
    #scroller li { 
 
     padding: 0 10px; 
 
     height: 40px; 
 
     line-height: 40px; 
 
     border-bottom: 1px solid #ccc; 
 
     border-top: 1px solid #fff; 
 
     background-color: #fafafa; 
 
     font-size: 14px; 
 
    } 
 
    
 
    #monitor { 
 
     position: absolute; 
 
     left: 51%; 
 
    }

<!--THIS IS THE RIGHT WAY TO LINK A FILE FROM GITHUB--> 
 
<script src="https://rawgit.com/cubiq/iscroll/master/build/iscroll-probe.js"></script> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 

 

 

 
    <div id="page-content-wrapper"> 
 
    <div id="scroller" class="container"> 
 
     <div class="row page-header"> 
 
     <div class="col-sm-12 col-md-5 col-md-offset-2"> 
 
      <h2>Breakfast menu</h2> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-sm-12 col-md-8 col-md-offset-2"> 
 
      <ul class="list-group"> 
 
       <li class="list-group-item">A cool list item!</li> 
 
       <li class="list-group-item">A cool list item!</li> 
 
       <li class="list-group-item">A cool list item!</li> 
 
       <li class="list-group-item">A cool list item!</li> 
 
       <li class="list-group-item">A cool list item!</li> 
 
       <li class="list-group-item">A cool list item!</li> 
 
       <li class="list-group-item">A cool list item!</li> 
 
       <li class="list-group-item">A cool list item!</li> 
 
       <li class="list-group-item">A cool list item!</li> 
 
       <li class="list-group-item">A cool list item!</li> 
 
       <li class="list-group-item">A cool list item!</li> 
 
       <li class="list-group-item">A cool list item!</li> 
 
       <li class="list-group-item">A cool list item!</li> 
 
       <li class="list-group-item">A cool list item!</li> 
 
       <li class="list-group-item">A cool list item!</li> 
 
       <li class="list-group-item">A cool list item!</li> 
 
       <li class="list-group-item">A cool list item!</li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>