iScroll:动态滚动容器/添加内容/添加更多容器

iScroll: dynamic scroll container / add content / add more container

本文关键字：添加 iScroll 动态 滚动      更新时间：2023-09-26

在我找到一种方法使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。

我能做什么？

最后我找到了一个解决方案。完整的工作解决方案如下：

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

Scroll函数和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 });');
    });
}

但这不是（滚动工作，但仍然引用错误：myScroll2未定义）

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 });');
    });
}

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

相关文章：