大型滚动div在ipad上无法使用

时间:2014-05-14 14:41:02

标签: jquery html ipad mobile-safari

我正在开发一个基于网络的移动网站,它有两个视图,其中一个视图是数据的列表视图。根据用户输入过滤数据。问题是该列表可能包含3000个项目。在这种情况下,滚动速度非常慢。但是当列表被过滤到大约100个元素时,它非常活泼。是否有任何其他方法可以用来处理ipad浏览器中的这一数据量,它似乎达到了一些内存限制..

滚动容器的代码

div style="display:none;" id="list-view" class="list-view">
    <div id="list-view-container">
        <div id="list-header" class="row">
            <div class="col-sm-3 med">
                property ID
            </div>
            <div class="col-sm-3">
                property Name
            </div>
            <div class="col-sm-3 wide">
                Address
            </div>
            <div class="col-sm-3">
                Project Status
            </div>

        </div>
        <hr>

    <div id="list-view-container-inner">
       // ~3000 divs here
</div>

我如何使这个div可滚动

  function touchScroll(id){
        try{
            var el=document.getElementById(id);
            var scrollStartPos=0;

            document.getElementById(id).addEventListener("touchstart", function(event) {
                scrollStartPos=this.scrollTop+event.touches[0].pageY;
                event.preventDefault();

            },false);

            document.getElementById(id).addEventListener("touchmove", function(event) {
                this.scrollTop=scrollStartPos-event.touches[0].pageY;
                event.preventDefault();
            },false);
        }catch(err){
            //throw some errors
        }
    }


$(function() {
     touchScroll('list-view-container-inner');
});

唯一的解决方案&#34;我的目的是要求用户更多地过滤数据。

0 个答案:

没有答案