将旋转木马iScroll放入现有的垂直iScroll中 [英] Have carousel iScroll inside an existing vertical iScroll

问题描述

我无法在垂直区域内实施Carousel iScroll.由于轮播是水平滚动，而iScroll是 垂直滚动，这会导致故障，因为轮播会滚动 即使我禁用它也是垂直的.

I am having trouble with implementing Carousel inside a vertical iScroll. Since the Carousel is horizontal scrolling and iScroll is vertical scrolling, its causing a glitch, in that Carousel scrolls vertical even if I disabled it.

我尝试分离两个包装器(即，...，...)，但问题仍然存在. 有人可以告诉我如何解决这个问题.

I tried separating the two wrappers (ie....,...), but the problem is still there. Can someone tell me how to solve this.

(我是Java语言的新手，所以有些例子很棒)

(I am new to Javascript, so some kind of example would be great)

这是我的脚本:

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-->

推荐答案

您在这里...

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

垂直滚动条中的水平轮播.

A horizontal carousel inside a vertical scroll.

这篇关于将旋转木马iScroll放入现有的垂直iScroll中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！