異步加載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").就沒有問題了啦~~~~