异步加载DOM造成的高度问题造成iScroll不能滚动

今天在使用iscroll4 做一个简单触屏滚动demo,发现上下拖动的时候总是会回弹,不能看到下面的内容.这个问题苦恼了很久,终于解决,下来就分享一下:

　　我的需求是这样的:

　　1.获取json数据append到div中去:

<div id="resultContent" class="content resultContent" style="height:280px; overflow: hidden">
        <div id="showResult" class="showResult" >
        </div>
    </div>

<script type="text/javascript">
    $("#showResult").children().remove();
        var htmlContent="";

        //resultSet是已经获取的数据.现在要动态添加到id为showResult的Div中
        $.each(resultSet, function (index, items) {
            htmlContent += '<div class="questionDiv">' +
                    '<table width="100%"><tr>' +
                    '<td width="30" style=" vertical-align:top; padding-top:9px;"><img src="images/selectPro/yellowPoint.png"/></td>    ' +
                    '<td>' + items.value.question + '</td></tr>' +
                    '<tr><td colspan="2" style=" color:red;padding-left:7%; font-size:18px;">' + items.value.solution + '</td></tr>' +
                    '</table>' +
                    '</div>';
        });
        $("#showResult").append(htmlContent);
</script>

　　2,使该id为#showResult的div可以触屏滚动,所以我引入了iscroll4 :

<script type="text/javascript">

　　setTimeout(function () {
                    clearInterval(intervalTime);
                    myScroll = new iScroll('resultContent');
  }, 100)
</script>

　　问题来了:

　　我这里动态添加到div中的内容不管怎么都不被iscroll所渲染,拖动效果就像橡皮筋一样,永远看不到下面隐藏的内容,如下图所示:

　　这个问题就是因为,你这个动态数据还没有append完成.该showResult 还没有加载完成,就开始 new iScroll("XXXX")了,这样就不行了,

解决方法:

　　关键点:找到这个动态添加的层什么时候加载完成,这个时间点要拿准~~~~

　　我的解决方法:

<script type="text/javascript">
    /**
     * 初始化显示结果层的高度,iScroll渲染
     */
    var initScroll = function () {
        intervalTime = setInterval(function () {
            var resultContentH = $("#showResult").height();
            if (resultContentH > 0) {  //判断数据加载完成的条件
                console.log("此时showResult的高度是:" + resultContentH);
                $("#showResult").height(resultContentH)
                setTimeout(function () {
                    clearInterval(intervalTime);
                    myScroll = new iScroll('resultContent');
                }, 100)
            }
        }, 10);
    }
</script>

我这里就用它的高度来判断是否加载完成,然后重新给定高度.这样以后再new iScroll("XXXX").就没有问题了啦~~~~

爱程序网

Tags：[db:关键字]