iScroll視差效果

我想了解視差如何與iscroll5一起使用。據我所知，我可以定義一個容器作爲改變滾動速度的指標。但是我需要做的是在同一時間對幾個元素應用一個速度比。iScroll視差效果

我們來看下面的例子，我將如何着手改變所有h2元素的speedratioX？

這裏是jsfiddle（可能更容易），並且在這樣的同一個例子如下：

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的建議。

感謝您的幫助！

來源

2017-09-21 Pipo

好的，我找到了一個解決方案。我在這裏張貼這個作爲答案，以防它可以幫助某人。

所以我注意到，你可以傳遞一個數組indicators而不只是一個元素。所以我使用了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>

來源

2017-09-25 13:03:58 Pipo

iScroll視差效果

回答

相關問題