javascript - iScroll 不显示滚动条，但允许我拖动内容

Question

我就是这样调用它的

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

/**/
$(document).ready(function() {
    //Created an array for adding n iScroll objects
    var myScroll = new Array();

    $('.content').each(function(){
        if($(this).attr('id')==null){
            $(this).attr('id') = $(this).attr('class');
        }
        id = $(this).attr('id');
        console.log(id);
        $(this).html('<div class="scroller">'+$(this).html()+'</div>');
        myScroll.push(new iScroll(id));
    });
});

我对它做了一些修改，这样你就可以将它与类一起使用，而不仅仅是 id。

它似乎有效(要启用)，因为我可以拖动容器及其内容(但它不会保持位置，它会在鼠标释放时恢复)

如果您想看到它的发生，请访问 http://toniweb.us/grano然后点击菜单中的任意一项，新显示的就有效果了。

知道为什么它可以工作但不符合预期吗？

我想这样做的原因是因为容器有几个子容器，这些子容器将根据内容选择隐藏或显示。

CSS:

#nvl1{
    padding:0px 25px;
    z-index:10;
    position:absolute;
    left:0px;
    background:url("../img/fondoNivel2.jpg") no-repeat scroll right 0 #79797B ; 
    height:100%;
}



#nvl1 .content{
        width:650px;
        z-index:11;
        display:none;
        color:#6666b6b;
        position:relative;
        line-height:30px;
    }

Answer 1

我查看了您的代码:http://toniweb.us/grano

我认为您想要做的是在您的类(class)上使用 iScroll 进行“滚动”。这不是您在以下代码中所做的事情，而是实际上将 iScroll 设置为使用滚动条 DIV 的父级:

id = $(this).attr('id');
$(this).html('<div class="scroller">'+$(this).html()+'</div>');
myScroll.push(new iScroll(id));

仅供引用:iScroll 使用 ID 而不是类

这样做的效果是，它会对紧随其后的 block 级元素(您的滚动条 DIV)造成“捕捉”效果。

考虑这个示例，其中有一个 DIV (id="scroller")，其中包含一个 OL，其中包含许多( block 级)LI:

http://cubiq.org/dropbox/iscroll4/examples/simple/

长话短说，为带有滚动条类的 DIV 指定一个 id，然后从中创建 iScroll。