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

我想你想做的是在你的类上使用 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") 包含一个包含多个( block 级)LI 的 OL:

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

长话短说，给你的 DIV 和 scroller 类一个 id 并从中创建你的 iScroll。