1

垂直iScroll内にカルーセルを実装するのに問題があります。カルーセルは水平スクロールであり、iScrollは垂直スクロールであるため、グリッチが発生します。カルーセルは、無効にしても垂直にスクロールします。

2つのラッパー（つまり....、...）を分離しようとしましたが、問題はまだあります。誰かがこれを解決する方法を教えてもらえますか？

（私はJavascriptを初めて使用するので、ある種の例があれば素晴らしいでしょう）

これが私のスクリプトです：

var myScroll, myWipe; 
function loaded() { 
                myScroll = new iScroll('wrapper1'); 
                myWipe = new iScroll('wrapper2', { 
                snap: true, 
                momentum: false, 
                vscroll: false, 
                hscroll: true, 
                lockDirection: true, 
                hScrollbar: false, 
                onScrollEnd: function () { 
                        document.querySelector('#indicator > li.carouselSelect').className 
= ''; 
                        document.querySelector('#indicator > li:nth-child(' + 
(this.currPageX+1) + ')').className = 'carouselSelect'; 
                } 
         }); 
        }; 

window.addEventListener('load', loaded, false);

と私のHTML：

<div id="wrapper1"> 
<div id="scroller1"> 
        <ul class="table-view table-action "> 
                <li></li> 
                <li></li> 

<!--myWipe--> 
<div id="wrapper2"> 
        <div id="scroller2"> 
                <ul> 
                    <li></li> 
                    <li></li> 
                    <li></li> 
                </ul> 
        </div> 
</div> 

<div id="nav"> 
        <div id="prev" onclick="myWipe.scrollToPage('prev', 0);return 
false">&larr; prev</div> 
        <ul id="indicator"> 
                <li class="carouselSelect">1</li> 
                <li>2</li> 
                <li>3</li> 
        </ul> 
        <div id="next" onclick="myWipe.scrollToPage('next', 0);return 
false">next &rarr;</div> 
</div><!--end myWipe--> 
</ul> 
</div><!--end #scroller1--> 
</div><!--end #wrapper1-->
4

3 に答える 3

3

どうぞ...

http://jsfiddle.net/manseuk/r9VL2/2/

垂直スクロール内の水平カルーセル。

于 2012-02-06T14:14:42.380 に答える
0

myWipeを順序付けされていないリストの外側に移動してみてください。

于 2012-02-22T19:23:28.103 に答える
0

多方向スクロールが必要な場合は、Motus.jsを試してみてください。

*免責事項：私はライブラリを作成しました。

于 2013-04-17T18:25:49.457 に答える