javascript - 为什么 iScroll 没有初始化？

Question

我正在尝试让 iScroll 为我的网络应用程序工作(不幸的是， native 滚动并不能完成我需要的一切)。我一定是初始化错误了，因为现在它只是禁用了滚动。出了什么问题？

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>