爱程序网

异步加载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").就没有问题了啦~~~~

   

关于爱程序网 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助