Question

我正在使用iScroll.js水平滚动浏览一些图片，但由于某种原因，我不能在我的iPhone或iPad上垂直滚动在桌面上正常工作，

这是我的代码和codepen here

的链接

HTML

<div class="container-fluid projects" id="projects">
  <div id="wrapper">
    <div id="scroller">
      <ul id="thelist">
        <li class="child">
          <div class="photo" style="background-image: url(https://placehold.it/350x150)">
          </div>
        </li>
        <li class="child">
          <div class="photo" style="background-image: url(https://placehold.it/350x150)">
          </div>
        </li>
        <li class="child">
          <div class="photo" style="background-image: url(https://placehold.it/350x150)">
          </div>
        </li>
        <li class="child">
          <div class="photo" style="background-image: url(https://placehold.it/350x150)">
          </div>
        </li>
        <li class="child">
          <div class="photo" style="background-image: url(https://placehold.it/350x150)">
          </div>
        </li>
        <li class="child">
          <div class="photo" style="background-image:     url(https://placehold.it/350x150)">
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js">    </script>

<div class="test">
</div>

CSS

.test {
  height:200px;
}
.projects {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 768px) {
  html {
    font-size: 40px;
  }
}

.projects {
  background: #202020;
  height: 90vh;
  position: relative;
}

.projects h1 {
  position: absolute;
  left: 0;
  bottom: 2rem;
  text-align: center;
  padding: 0 0.5rem;
}

.projects h1 span {
  display: block;
  -webkit-transition: all 0.3s;
  transition: all 0.1s;
}

.projects h1 .small {
  font-size: 1.5rem;
  font-weight: 400;
  color: #3498DB;
  line-height: 1;
}

.projects h1 .name {
  font-size: 2.5rem;
  color: #E74C3C;
  line-height: 2.9rem;
  font-weight: 700;
}

.projects h1 .tag {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.7rem;
  line-height: 1;
  text-indent: -0.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 1rem 0 0;
  padding: 0.6rem 0 0;
  text-transform: uppercase;
  letter-spacing: -0.02rem;
}

#wrapper {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}


/**
 * Width of each child = 12.5rem;
 * Width of photo in each child = 12.5 * 2 = 25rem;
 * Total horizontal width = each_child_width * no_of_childs_space;
 */

#scroller {
  width: 87.5rem;
  height: 100%;
  float: left;
  padding: 0;
}

#scroller ul {
  width: 130rem;
  height: 100%;
  list-style: none;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  text-align: left;
}

.child {
  width: 12.5rem;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  /**/
  -webkit-user-select: none;
  cursor: -webkit-grab;
  /**/
  -webkit-transform: skew(-10deg);
  -moz-transform: skew(-10deg);
  transform: skew(-10deg);
}

.child:hover {
  z-index: 10;
  /**/
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.child:active {
  cursor: -webkit-grabbing;
}

.child .photo {
  width: 17rem;
  height: 100%;
  position: absolute;
  top: 0;
  left: -10%;
  background-position: top;
  background-size: cover;
  opacity: 0.5;
  /**/
  -webkit-transform: skew(+10deg) scale(1);
  -moz-transform: skew(+10deg) scale(1);
  transform: skew(+10deg) scale(1);
  /**/
  -webkit-transition: all 0.3s cubic-bezier(0.165, 0.840, 0.440, 1.000);
  -moz-transition: all 0.3s cubic-bezier(0.165, 0.840, 0.440, 1.000);
  transition: all 0.3s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

.child:hover .photo {
  opacity: 1;
  /**/
  -webkit-transform: skew(+10deg) scale(1.05);
  -moz-transform: skew(+10deg) scale(1.05);
  transform: skew(+10deg) scale(1.05);
}

.child .photo:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
}

.iScrollHorizontalScrollbar {
  position: absolute;
  z-index: 9999;
  height: 0.5rem;
  left: 0.3rem;
  right: 0.3rem;
  bottom: 0.3rem;
  overflow: hidden;
  /**/
  -webkit-transform: skew(-10deg);
  -moz-transform: skew(-10deg);
  transform: skew(-10deg);
}

.iScrollIndicator {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  height: 0.5rem;
}

.iScrollIndicator:hover,
.iScrollIndicator:active {
  background: rgba(255, 255, 255, 0.5);
}

.iScrollIndicator:hover {
  cursor: -webkit-grab;
}

.iScrollIndicator:active {
  cursor: -webkit-grabbing;
}

JS

    // Run along now, this is a private party
(function(document, window) {

  // DOM nodes and objects instances
  var $thelist, $thelistChilds, $wrapper, myScroll, loaded;

  // numerical variables
  var i = 0,
    left = 0;

  // exec after DOM loaded
  loaded = function() {

    // assign lefts to each child
    $thelist = document.getElementById('thelist');
    $thelistChilds = $thelist.children;
    for (i = 0; i < $thelistChilds.length; i++) {
      left += 12.5;
      $thelistChilds[i].style.left = left + 'rem';
    };

    // setup iScroll
    $wrapper = document.getElementById('wrapper');
    myScroll = new IScroll($wrapper, {
      'scrollbars': 'custom',
      'mouseWheel': true,
      'bounce': true,
      'interactiveScrollbars': true,
      'eventPassthrough': true,
      'scrollX': true,
      'scrollY': true,
      'eventPassthrough': true,
      'click': true,
      'tap': true
    });
  }

  // if its a touch screen
  if ('ontouchstart' in window) {

    // avoid and browser screen bounce
    document.addEventListener('touchmove', function(e) {
      e.preventDefault();
    }, false);
  };

  // setup DOM ready
  document.addEventListener('DOMContentLoaded', loaded, false);
})(document, window);

iScroll.js垂直滚动无法在移动设备上运行

0 个答案: