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を必要としないその他の提案は公開されています。

ありがとうございました！

Answer 1

私は解決策を見つけました。それが誰かを助けることができる場合に備えて私は答えとしてここに掲示しています。

私は気付いたindicatorsの配列を渡すことができ、1つの要素だけではありません。だから、私はforループを使用して、新しいIScrollクラスを作成するときに使用する配列を生成しました。ここで

は、それがどのように見えるかです：

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>