Question

<!DOCTYPE html>
<html lang="UTF-8">
<head>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <link rel="stylesheet" type="text/css" href="./css/screen.css" />
    <style>
    #wrap {
        width:100%;
        height:100%;
    }

    header {
        position:fixed;
        top:0;
        right:0;
        width:100%;
        color:#fff;
        height:147px;
        z-index:1000;
    }

    .head {
        width:100%;
        background:#4162ff;
    }

    .h_wrap {
        width:92.2222%;
        margin:0 auto;
        position:relative;
    }

    .head h1 {
        font-size:1.5rem;
        font-weight:500;
    }

    .top_bar {
        height:5.6rem;
        color:#fff;
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    .top_bar a {
        display:inline-block;
        color:#fff;
        font-size:1.2rem;
    }

    .top_bar img {
        width:2rem;
        height:auto;
        vertical-align:middle;
    }

    .menu_bar ul {
        height:48px;
        font-size:1.4rem;
        color:#fff;
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    .select_box {
        margin-top:0.4rem;
        height:3.9rem;
        display:flex;
        justify-content:space-between;
    }

    .select_box > div {
        height:1.2rem;
        font-size:1.4rem;
        border-bottom:none;
        width:44.7%;
        padding:0.8rem 0.7rem;
        background-size:1.9rem;
    }

    .select_local_up {
        border:1px solid #fff;
        color:#fff;
        background:url(../images/icon_arrow_down.png) no-repeat 98% 1.2rem;
    }

    .select_local_down {
        color:#4162ff;
        border:1px solid #4162ff;
        background:url(../images/icon_arrow_up.png) no-repeat 98% 1.2rem;
        background-color:#fff;
    }

    .select_license_up {
        border:1px solid #fff;
        color:#fff;
        background:url(../images/icon_arrow_down.png) no-repeat 98% 1.2rem;
    }

    .select_license_down {
        color:#4162ff;
        border:1px solid #4162ff;
        background:url(../images/icon_arrow_up.png) no-repeat 98% 1.2rem;
        background-color:#fff;
    }

    .notice {
        width:96.666%;
        margin:0 auto;
        position:relative;
        top:147px;
        z-index:50;
        background:#ebeefa;
    }

    .notice ul.notice_wrap {
        width:100%;
        margin:0 auto;
        overflow:auto;
    }

    ul.notice_wrap li.card_item {
        float:left;
        background-color: #ebeefa;
        width:50%;
        text-align:center;
    }
    </style>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="./cordova.js"></script>
    <script src="./js/Header.js"></script>
    <script src="./js/iscroll.js"></script>
    <script src="./js/Noti.js"></script>
    <script type="text/javascript">
        var lastPosition = 0, lastMax = 0, start = 0;
        var myScroll

        $(document).ready(function() {
            initSelect()

            myScroll = new IScroll('#wrapper')

            $('#select_local').click(function() {
                showLocal()
            })

            $('#select_license').click(function() {
                showLicense()
            })
        })

        $(window).scroll(function() {
            var currentPosition = $(window).scrollTop()
            var maxPosition = $('#wrapper').outerHeight()

            if( (currentPosition > lastPosition) && (lastMax < maxPosition) ) {
                if(currentPosition > maxPosition * 0.9) {
                    lastPosition = currentPosition
                    lastMax = maxPosition
                    start += 150
                    getNotification(select_location, select_license, start)
                }
            }
        });
    </script>
</head>

<body>
    <div id="wrap">
        <header>
            <div class="head">
                <div class="h_wrap">

                    <div class="top_bar">
                        <a class="btn_search"><img src="./images/icon_search.png">Search</a>
                        <h1>App</h1>
                        <span><a><img src="./images/icon_star.png"></a>&nbsp;&nbsp;<a><img src="./images/icon_menu.png"></a></span>
                    </div>

                    <div class="menu_bar">
                        <ul>
                            <li>private</li>
                            <li>common</li>
                            <li>public</li>
                            <li>open</li>
                        </ul>
                    </div>

                    <div class="select_box">
                        <div id="select_local" class="select_local_up"><span>location</span></div>
                        <div id="select_license" class="select_license_up"><span>license</span></div>
                    </div>

                    <div id="LocationModal" class="select_layer" style="display:none">
                        <div class="border_line">
                            <div class="layer_wrap">
                                <h2>Choose Location.</h2>
                                <ul class="local_button"></ul>
                            </div>
                        </div>
                    </div>

                    <div id="LicenseModal" class="select_layer" style="display:none">
                        <div class="border_line">
                            <div class="layer_wrap">
                                <h2>Choose License</h2>
                                <ul class="license_button"></ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </header>

        <section id="wrapper" class="notice">
            <ul id="scroller" class="notice_wrap"></ul>
        </section>
    </div>
</body>
</html>

这是我的主播html。

当我拨打getNotification()功能时，<li>底部会输入卡片形状的<ul id = "scroller" class = "notice_wrap">标签。

一次打印150张卡片，当它达到底部10％时，它会输出150张新卡片。这里有一个问题。

将覆盖150张新牌而不是底牌。而且这个位置仍处于最低位10％。作为json对象从数据库接收的数据由$.each()处理，每个数据由append()处理。

我使用了iscroll.js，但结果是一样的。

我想知道为什么？

在cordova，为什么我不能在我的HTML中应用滚动？

0 个答案: