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视差效果

回答

相关问题