Fatal编程技术网
  • javascript/
  • Javascript 在科尔多瓦，为什么我能'；在我的html中不应用滚动？ #包裹{ 宽度：100%； 身高：100%； } 标题{ 位置：固定； 排名：0； 右：0； 宽度：100%； 颜色：#fff； 高度：147px； z指数：1000； } .头{ 宽度：100%； 背景：#4162ff； } .h_包装{ 宽度：92.2222%； 保证金：0自动； 位置：相对位置； } .总目h1{ 字体大小：1.5rem； 字号：500； } .顶杆{ 身高：5.6雷姆； 颜色：#fff； 显示器：flex； 证明内容：之间的空间； 对齐项目：居中； } .顶杆a{ 显示：内联块； 颜色：#fff； 字号：1.2rem； } .顶杆img{ 宽度：2em； 高度：自动； 垂直对齐：中间对齐； } .菜单栏{ 高度：48px； 字体大小：1.4rem； 颜色：#fff； 显示器：flex； 证明内容：之间的空间； 对齐项目：居中； } .选择一个复选框{ 保证金上限：0.4雷姆； 高度：3.9雷姆； 显示器：flex； 证明内容：之间的空间； } .选择_box>div{ 高度：1.2rem； 字体大小：1.4rem； 边框底部：无； 宽度：44.7%； 填充：0.8雷姆0.7雷姆； 背景大小：1.9雷姆； } .选择“本地”\u up{ 边框：1px实心#fff； 颜色：#fff； 背景：url（../images/icon\u arrow\u down.png）不重复98%1.2rem； } .选择“本地”按钮{ 颜色：#4162ff； 边框：1px实心#4162ff； 背景：url（../images/icon\u arrow\u up.png）不重复98%1.2rem； 背景色：#fff； } 。选择“许可证”\u up{ 边框：1px实心#fff； 颜色：#fff； 背景：url（../images/icon\u arrow\u down.png）不重复98%1.2rem； } 。选择“许可证”\u down{ 颜色：#4162ff； 边框：1px实心#4162ff； 背景：url（../images/icon\u arrow\u up.png）不重复98%1.2rem； 背景色：#fff； } .通知{ 宽度：96.666%； 保证金：0自动； 位置：相对位置； 顶部：147px； z指数：50； 背景：#Ebefa； } 注意，注意{ 宽度：100%； 保证金：0自动； 溢出：自动； } ul.通知(包裹)li.卡片(物品){ 浮动：左； 背景色：#Ebefa； 宽度：50%； 文本对齐：居中； } var lastPosition=0，lastMax=0，start=0； 迈斯克罗尔变种 $（文档）.ready（函数（）{ initSelect（） myScroll=new IScroll（“#wrapper”） $（“#选择_本地”）。单击（函数（）{ showLocal（） }) $（“#选择_许可证”）。单击（函数（）{ showLicense（） }) }) $（窗口）。滚动（函数（）{ var currentPosition=$（窗口）.scrollTop（） var maxPosition=$（“#包装器”）.outerHeight（） 如果（（currentPosition>lastPosition）&&（lastMax最大位置*0.9）{ lastPosition=currentPosition lastMax=maxPosition 开始+=150 getNotification（选择\位置，选择\许可证，开始） } } }); 搜寻 应用程序 私人的 普通的 公开的 打开 位置 许可证 选择位置。 选择许可证

Javascript 在科尔多瓦，为什么我能'；在我的html中不应用滚动？ #包裹{ 宽度：100%； 身高：100%； } 标题{ 位置：固定； 排名：0； 右：0； 宽度：100%； 颜色：#fff； 高度：147px； z指数：1000； } .头{ 宽度：100%； 背景：#4162ff； } .h_包装{ 宽度：92.2222%； 保证金：0自动； 位置：相对位置； } .总目h1{ 字体大小：1.5rem； 字号：500； } .顶杆{ 身高：5.6雷姆； 颜色：#fff； 显示器：flex； 证明内容：之间的空间； 对齐项目：居中； } .顶杆a{ 显示：内联块； 颜色：#fff； 字号：1.2rem； } .顶杆img{ 宽度：2em； 高度：自动； 垂直对齐：中间对齐； } .菜单栏{ 高度：48px； 字体大小：1.4rem； 颜色：#fff； 显示器：flex； 证明内容：之间的空间； 对齐项目：居中； } .选择一个复选框{ 保证金上限：0.4雷姆； 高度：3.9雷姆； 显示器：flex； 证明内容：之间的空间； } .选择_box>div{ 高度：1.2rem； 字体大小：1.4rem； 边框底部：无； 宽度：44.7%； 填充：0.8雷姆0.7雷姆； 背景大小：1.9雷姆； } .选择“本地”\u up{ 边框：1px实心#fff； 颜色：#fff； 背景：url（../images/icon\u arrow\u down.png）不重复98%1.2rem； } .选择“本地”按钮{ 颜色：#4162ff； 边框：1px实心#4162ff； 背景：url（../images/icon\u arrow\u up.png）不重复98%1.2rem； 背景色：#fff； } 。选择“许可证”\u up{ 边框：1px实心#fff； 颜色：#fff； 背景：url（../images/icon\u arrow\u down.png）不重复98%1.2rem； } 。选择“许可证”\u down{ 颜色：#4162ff； 边框：1px实心#4162ff； 背景：url（../images/icon\u arrow\u up.png）不重复98%1.2rem； 背景色：#fff； } .通知{ 宽度：96.666%； 保证金：0自动； 位置：相对位置； 顶部：147px； z指数：50； 背景：#Ebefa； } 注意，注意{ 宽度：100%； 保证金：0自动； 溢出：自动； } ul.通知(包裹)li.卡片(物品){ 浮动：左； 背景色：#Ebefa； 宽度：50%； 文本对齐：居中； } var lastPosition=0，lastMax=0，start=0； 迈斯克罗尔变种 $（文档）.ready（函数（）{ initSelect（） myScroll=new IScroll（“#wrapper”） $（“#选择_本地”）。单击（函数（）{ showLocal（） }) $（“#选择_许可证”）。单击（函数（）{ showLicense（） }) }) $（窗口）。滚动（函数（）{ var currentPosition=$（窗口）.scrollTop（） var maxPosition=$（“#包装器”）.outerHeight（） 如果（（currentPosition>lastPosition）&&（lastMax最大位置*0.9）{ lastPosition=currentPosition lastMax=maxPosition 开始+=150 getNotification（选择\位置，选择\许可证，开始） } } }); 搜寻 应用程序 私人的 普通的 公开的 打开 位置 许可证 选择位置。 选择许可证

javascript jquery html css cordova

Javascript 在科尔多瓦，为什么我能'；在我的html中不应用滚动？ #包裹{ 宽度：100%； 身高：100%； } 标题{ 位置：固定； 排名：0； 右：0； 宽度：100%； 颜色：#fff； 高度：147px； z指数：1000； } .头{ 宽度：100%； 背景：#4162ff； } .h_包装{ 宽度：92.2222%； 保证金：0自动； 位置：相对位置； } .总目h1{ 字体大小：1.5rem； 字号：500； } .顶杆{ 身高：5.6雷姆； 颜色：#fff； 显示器：flex； 证明内容：之间的空间； 对齐项目：居中； } .顶杆a{ 显示：内联块； 颜色：#fff； 字号：1.2rem； } .顶杆img{ 宽度：2em； 高度：自动； 垂直对齐：中间对齐； } .菜单栏{ 高度：48px； 字体大小：1.4rem； 颜色：#fff； 显示器：flex； 证明内容：之间的空间； 对齐项目：居中； } .选择一个复选框{ 保证金上限：0.4雷姆； 高度：3.9雷姆； 显示器：flex； 证明内容：之间的空间； } .选择_box>div{ 高度：1.2rem； 字体大小：1.4rem； 边框底部：无； 宽度：44.7%； 填充：0.8雷姆0.7雷姆； 背景大小：1.9雷姆； } .选择“本地”\u up{ 边框：1px实心#fff； 颜色：#fff； 背景：url（../images/icon\u arrow\u down.png）不重复98%1.2rem； } .选择“本地”按钮{ 颜色：#4162ff； 边框：1px实心#4162ff； 背景：url（../images/icon\u arrow\u up.png）不重复98%1.2rem； 背景色：#fff； } 。选择“许可证”\u up{ 边框：1px实心#fff； 颜色：#fff； 背景：url（../images/icon\u arrow\u down.png）不重复98%1.2rem； } 。选择“许可证”\u down{ 颜色：#4162ff； 边框：1px实心#4162ff； 背景：url（../images/icon\u arrow\u up.png）不重复98%1.2rem； 背景色：#fff； } .通知{ 宽度：96.666%； 保证金：0自动； 位置：相对位置； 顶部：147px； z指数：50； 背景：#Ebefa； } 注意，注意{ 宽度：100%； 保证金：0自动； 溢出：自动； } ul.通知(包裹)li.卡片(物品){ 浮动：左； 背景色：#Ebefa； 宽度：50%； 文本对齐：居中； } var lastPosition=0，lastMax=0，start=0； 迈斯克罗尔变种 $（文档）.ready（函数（）{ initSelect（） myScroll=new IScroll（“#wrapper”） $（“#选择_本地”）。单击（函数（）{ showLocal（） }) $（“#选择_许可证”）。单击（函数（）{ showLicense（） }) }) $（窗口）。滚动（函数（）{ var currentPosition=$（窗口）.scrollTop（） var maxPosition=$（“#包装器”）.outerHeight（） 如果（（currentPosition>lastPosition）&&（lastMax最大位置*0.9）{ lastPosition=currentPosition lastMax=maxPosition 开始+=150 getNotification（选择\位置，选择\许可证，开始） } } }); 搜寻 应用程序 私人的 普通的 公开的 打开 位置 许可证 选择位置。 选择许可证,javascript,jquery,html,css,cordova,Javascript,Jquery,Html,Css,Cordova,这是我的cordova主html 调用getNotification（）函数时，在的底部输入带有卡片形状的标签 它一次打印150张卡，当它到达底部10%时，它输出150张新卡。 这里有个问题 将覆盖150张新卡，而不是在下面。而该仓位仍处于底部10%。 作为json对象从DB接收的数据由$处理。each（），每个数据由append（）处理 我使用了iscroll.js，但结果是一样的 我想知道为什么？Cordova针对移动设备进行了优化，它有一个滚动模拟（这不是正常的滚动）@Arther Gui

这是我的cordova主html

调用
getNotification（）
函数时，在
的底部输入带有卡片形状的标签

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

将覆盖150张新卡，而不是在下面。而该仓位仍处于底部10%。 作为json对象从DB接收的数据由
$处理。each（）
，每个数据由
append（）
处理

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

我想知道为什么？

Cordova针对移动设备进行了优化，它有一个滚动模拟（这不是正常的滚动）@Arther Guiot>>那么…我应该用另一种方式来处理它吗？嗯，我真的不知道，我从未在Cordova上更改过滚动，但我认为互联网上有一两个教程。祝你好运@Arther Guiot>>谢谢你的评论：DCordova针对移动设备进行了优化，它有一个滚动模拟（这不是正常的滚动）@Arther Guiot>>那么…我应该用另一种方式来处理它吗？嗯，我真的不知道，我从未在Cordova上更改过滚动，但我认为互联网上有一两个教程。祝你好运@Arther Guiot>>谢谢你 
<!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>