Question

我正在使用iScroll5通过页面的各个部分滚动horizontal。这很好用，但是当我们试图将面板堆叠在左侧彼此顶部时，它们会相互通过。

到目前为止我做了什么：

使用水平示例
跟踪页面编号。如果页面编号为1并且页面正在通过屏幕的左侧，我将`li`更改为`position：fixed;左：0; width：50px;`换句话说，我将面板的宽度从auto / max-width 500px缩放到50px，并将其保留在左侧。想法是访问者可以单击此面板再次打开它。有点像水平手风琴。
当下一页通过时，它的`li`将得到`position：fixed;左：50像素;宽度：50像素;`
每次调整大小后我都在使用refresh（）;

问题在于面板永远不会粘在左边。我尝试了固定，粘性等，但它只是滚动。我在这里看到的唯一解决方案是将li移到包装器之外。但这是一个棘手的解决方案＆＃34;加上滚动机制（向后滚动以展开粘性窗格）将会出现问题。

我目前有这个

myScroll.on('scrollEnd', function () {



        for(var i=0; i<cells; i++)
        {
            if(this.currentPage['pageX'] > i)
            {
                $("div.cell"+i).addClass("fixed").appendTo("#wrapper").css({"left":i*50, "zIndex":(cells-i)});
                $("li.cell"+i).css({"width":50});
                this.refresh();
                //this.scrollToElement(document.querySelector('#scroller li:nth-child('+this.currentPage["pageX"]+')'), 100, (this.currentPage["pageX"]*50), null, IScroll.utils.ease.elastic)
            }
            else
            {
                $("div.cell"+i).removeClass("fixed").appendTo("li.cell"+i).removeAttr('style');
                $("li.cell"+i).removeAttr('style');
            }
        }
        //this.refresh();


});

这种作品。但它失去了抵消。当我打开刷新或滚动元素时，它可以工作，但它得到了bezerk。

iScroll5堆栈/粘性页面

0 个答案: