iScroll：动态滚动容器/添加内容/添加更多容器答案

【问题标题】：iScroll: dynamic scroll container / add content / add more containeriScroll：动态滚动容器/添加内容/添加更多容器
【发布时间】：2014-10-25 22:26:00
【问题描述】：

在我找到一种方法让 iScroll 在动态上工作后，添加滚动容器和/或更改滚动容器内的内容长度后，我遇到了附加功能的问题，例如

myScroll.scrollToElement(document.querySelector('#scroller li:nth-child(10)'))

我没有使用固定 ID，而是使用动态添加的类名，就像在原始示例中一样，以 <body onload="loaded()"> 开头，就像这样

function loaded () {
    var myScroll;
    var iscroller = $('.iscroller');
    iscroller.each(function(index){
        myScroll = new IScroll('.iscroller'+index, { mouseWheel: true, click: true });
    })
}

到目前为止，它对于滚动功能本身来说效果很好。每个滚动容器，在 html/php 代码之前有一个 class="iscroller"，通过它的索引得到另一个唯一的类名 iscroller0 ...1 ...2 等等。

当内容被动态添加时，它仍然可以正常工作，比如更多<li>，到容器中，之后调用loaded()。滚动仍然按预期工作。但是当我想调用像

这样的函数时

myScroll.scrollToElement(document.querySelector('#scroller li:nth-child(10)'))

它仅适用于最后一个容器，这对我来说似乎合乎逻辑。所以我尝试使用动态创建的对象，而不是像这样使用myScroll：

function loaded () {
    var iscroller = $('.iscroller');
    iscroller.each(function(index){
        eval('var myScroll'+index+' = new IScroll(\'.iscroller'+index+'\', { mouseWheel: true, click: true });');
    })
,}

在所有容器中像往常一样滚动仍然有效，但现在我希望能够调用

myScroll2.scrollToElement(document.querySelector('.iscroller2 li:nth-child(10)'))

但我收到控制台错误ReferenceError: myScroll2 is not defined。

我能做什么？

【问题讨论】：

标签： javascript jquery iscroll

【解决方案1】：

终于找到了解决办法。完整的工作解决方案在这个 sn-p 中：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<title>iScroll test</title>
<script src="js/jquery-1-10-2.js.php"></script>

<script type="text/javascript" src="js/iscroll_5.js.php"></script>

<script type="text/javascript">

function loaded () {
    var iscroller = $('.iscroller');
    iscroller.each(function(index){
        $(this).addClass('iscroller'+index);
        var ul = $(this).find('ul:eq(0)');
        for(var i=1; i < 10*(index+1); i++) ul.append('<li>Pretty Row '+i+'</li>');
    });
    iscroller_init ();
}

    function iscroller_init () {
        var iscroller = $('.iscroller');
        iscroller.each(function(index){
            eval('var myScroll'+index);
        });
        iscroller.each(function(index){
            eval('myScroll'+index+' = new IScroll(\'.iscroller'+index+'\', { mouseWheel: true, click: true });');
        });
    }

function click() {
    iscroller_init ();
    myScroll2.scrollToElement(document.querySelector('.iscroller2 li:last-child'), 1200, null, null, IScroll.utils.ease.elastic);
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

</script>

    <link rel="stylesheet" media="all" href="css/iscroll_base.css" />
    <link rel="stylesheet" media="all" href="css/iscroller.css" />

</head>
<body onload="loaded()">
    <div class="module">
        <div id="header">iScroll</div>
        <div id="left" class="iscroller">
            <div class="scroller">
                <ul>
                </ul>
            </div>
        </div>

        <div id="center" class="iscroller">
            <div class="scroller">
                <ul>
                </ul>
            </div>
        </div>

        <div id="right" class="iscroller">
            <div class="scroller">
                <ul>
                </ul>
            </div>
        </div>
    </div>

    <div id="footer"><a href="javascript:click()">scrollToLast</a></div>

</body>
</html>

滚动功能有效，myScroll2.scrollToElement(document.querySelector('.iscroller2 li:nth-child(10)')) 的调用也有效，（是的，我在 HTML 中有 3 个容器，因此可以使用 0、1 和 2 的索引）。

但我不明白为什么以下工作......

function loaded () {
    var iscroller = $('.iscroller');
    iscroller.each(function(index){ /*var wird definiert*/
        $(this).addClass('iscroller'+index);
        eval('var myScroll'+index);
    });
    iscroller.each(function(index){ /*var wird einmalig gefüllt*/
        eval('myScroll'+index+' = new IScroll(\'.iscroller'+index+'\', { mouseWheel: true, click: true });');
    });
}

但这不是（滚动有效，但仍然是 ReferenceError: myScroll2 is not defined）

function loaded () {
    var iscroller = $('.iscroller');
    iscroller.each(function(index){ /*var wird definiert UND einmalig gefüllt*/
        eval('var myScroll'+index);
        eval('myScroll'+index+' = new IScroll(\'.iscroller'+index+'\', { mouseWheel: true, click: true });');
    });
}

这也不是

function loaded () {
    var iscroller = $('.iscroller');
    iscroller.each(function(index){ /*var wird gleich definiert UND gefüllt*/
        eval('var myScroll'+index+' = new IScroll(\'.iscroller'+index+'\', { mouseWheel: true, click: true });');
    });
}

这对我来说仍然不合逻辑，所以也许有人可以发布另一个答案来解释发生了什么。

【讨论】：