iScroll视差效果

Question

我正在尝试了解视差如何与 iscroll5 一起工作。据我了解，我可以将容器定义为改变滚动速度的指示器。但是我需要做的是同时对多个元素应用速度比。

让我们以下面的例子为例，我将如何一次更改所有 h2 元素的 speedratioX？

这是 jsfiddle（可能更容易），下面是 SO 中的相同示例：

var container = document.getElementsByClassName('iscroll__wrapper')[0],
    myScroll = new IScroll(container, { 
      scrollX: true, 
      scrollY: false, 
      mouseWheel: true
    });

.iscroll__wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
}

ul {
  margin: 0;
  padding: 0;
  display: flex;
  width: 1200px;
  height: 300px;
}

li {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: calc(100% / 3);
  padding-left: 2em;
  padding-right: 2em;
  list-style: none;
}

figure {
  margin: 0;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

<script src="https://cdn.jsdelivr.net/npm/iscroll/build/iscroll-probe.js"></script>
<div class="iscroll__wrapper">
  <ul>
    <li>
      <figure><img src="https://lorempixel.com/900/200"></figure>
      <h2 class="title">Title 1</h2>
    </li>
    <li>
      <figure><img src="https://lorempixel.com/900/200"></figure>
      <h2 class="title">Title 1</h2>
    </li>
    <li>
      <figure><img src="https://lorempixel.com/900/200"></figure>
      <h2 class="title">Title 1</h2>
    </li>
  </ul>
</div>

现在，我的问题是：

只用iScroll可以吗？如果是这样，如何（文档只提到改变整个容器的速度比）？
如果不可能，我愿意接受任何其他可以与 iScroll 集成且不需要 jQuery.
[=43= 的建议]

感谢您的帮助！

Answer 1

好的，我找到了解决方案。我在这里发布这个作为答案，以防它可以帮助某人。

所以我注意到 您可以传递 indicators 的数组，而不仅仅是一个元素。所以我使用 for 循环来填充我在创建新 IScroll class.

时使用的数组

外观如下：

var container = document.getElementsByClassName('iscroll__wrapper')[0],
  containerLis = container.getElementsByTagName('li'),
  indicatorsArr = [],
  myScroll;

// Generating the indicators array
for (var i = 0; i < containerLis.length; i++) {
  var indicatorEl = container.getElementsByTagName('h2')[i];

  indicatorsArr[i] = {
    el: indicatorEl,
    resize: false,
    ignoreBoundaries: true,
    listenX: true,
    listenY: false,
    speedRatioX: 0.3
  };
}

// Creating a new IScroll class
myScroll = new IScroll(container, {
  scrollX: true,
  scrollY: false,
  mouseWheel: true,
  indicators: indicatorsArr
});

.iscroll__wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
}

ul {
  margin: 0;
  padding: 0;
  display: flex;
  width: 1200px;
  height: 300px;
}

li {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: calc(100% / 3);
  padding-left: 2em;
  padding-right: 2em;
  list-style: none;
}

figure {
  margin: 0;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

h2 {
  padding-left: 5em;
}

<script src="https://cdn.jsdelivr.net/npm/iscroll/build/iscroll.js"></script>
<div class="iscroll__wrapper">
  <ul>
    <li>
      <figure><img src="https://lorempixel.com/900/200"></figure>
      <h2><span>Title 1</span></h2>
    </li>
    <li>
      <figure><img src="https://lorempixel.com/900/200"></figure>
      <h2><span>Title 2</span></h2>
    </li>
    <li>
      <figure><img src="https://lorempixel.com/900/200"></figure>
      <h2><span>Title 3</span></h2>
    </li>
  </ul>
</div>

iScroll视差效果

iScroll parallax effect

javascript

parallax

iscroll