Question

我在周末对抗这个错误，我找不到解决方案。我的JQuery Mobile应用程序有一些开关。在Android 2.2或2.3上进行测试时会发生一个奇怪的错误：我向下滚动一点到达开关然后我用一个轻扫手势触发它们，页面跳到底部甚至是底部。从那时起，它无法滚动到页面顶部！似乎可滚动区域以某种方式重新定义了自己。

我制作了一个简单的演示来展示这种行为。一切都是开箱即用的。 JQM，JQ，iScroll和iScrollview不受影响，没有自己的代码。

更新我刚刚使用JQM 1.3.2在Github上做了一个升级早午餐 - 交换机现在正在工作但是范围滑块不行; /似乎是滑动事件触发iscroll的某种方式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes">

        <title>iScroll Jumpbug Demo</title>
            <link rel="stylesheet" href="css/jquery.mobile-1.2.1.min.css"/>
            <link rel="stylesheet" href="css/jquery.mobile.iscrollview.css" />
            <script src="js/jquery-1.8.3.min.js"></script>
            <script src="js/jquery.mobile-1.2.1.min.js"></script>
            <script src="js/iscroll.js"></script>
            <script src="js/jquery.mobile.iscrollview.js"></script>

    </head>

    <body>
        <!-- Home -->
        <div data-role="page" data-theme="b" id="main">
            <div data-role="header" data-id="persist" data-theme="b"  data-position="fixed">
                <h3>
                    iScroll Jumpbug Test
                </h3>
            </div>

            <div data-role="content" data-iscroll="{"hScroll":false, "vScroll": true, "vScrollbar":false, "bounce":false, "snap": false, "momentum":false}" style="padding: 2,5%">

                <ul data-role="listview" data-divider-theme="b" data-inset="true">
                    <li data-theme="b">
                        <a href="#" data-transition="slidefade">
                            Text
                        </a>
                    </li>
                </ul>
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->


        <!-- <<<<<<<<<<<<<<<<<<<<<<<<<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
        <ul data-role="listview" data-divider-theme="b" data-inset="true">
            <li data-theme="b"><a href="#" data-transition="slidefade">Testelement1</a></li>
            <li data-theme="b"><a href="#" data-transition="slidefade">Testelement2</a></li>
            <li data-theme="b"><a href="#" data-transition="slidefade">Testelement3</a></li>
        </ul>
        <div style="width:100%; height: 3em;"> </div>
        <!-- <<<<<<<<<<<<<<<<<<<<<<<<<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->

        <p> 
        This demo shows a bug that occures using JQM 1.2 and iScroll 4 with iScrollview on Android 2.x Devices. 
When you drag the page a little down and then use the second swipe trigger, the page jumps to the bottom 
over the border and "stucks" there - it's not more possible to scroll to the top. Looks a like the scrollable area redefines itself.  
        </p>

    <!-- Test Form -->

    <form>
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <label for="form_text">
                    Some Label
                </label>
                <textarea name="form_textarea" id="form_text" placeholder="Some fill element">
                </textarea>
            </fieldset>
        </div>
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <label for="toggleswitch1">
                    Switch me #1
                </label>
                <select name="form_mailinglist" id="toggleswitch1" data-theme="" data-role="slider">
                    <option value="0">
                        no
                    </option>
                    <option value="1">
                        yes
                    </option>
                </select>
            </fieldset>
        </div>
                            <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <label for="toggleswitch2">
                    Switch me #2
                </label>
                <select name="form_mailinglist2" id="toggleswitch2" data-theme="" data-role="slider">
                    <option value="0">
                        no
                    </option>
                    <option value="1">
                        yes
                    </option>
                </select>
            </fieldset>
        </div>

    </form>

    <!-- Linebreaks meant to make the scrollable area longer for testing purposes -->
    <p>
        <br/>
        1
        <br/>
        2
        <br/>
        3
        <br/>
        4
        <br/>
        5
        <br/>
        6
        <br/>
        7
        <br/>
        8
        <br/>
        9
        <br/>
        10
        <br/>
        11
        <br/>
        12
        <br/>
        13
        <br/>
        14
        <br/>
        15
        <br/>
        16
        <br/>
        17
        <br/>
        18
        <br/>
        19
        <br/>
        20
        <br/>
        21
        <br/>
        22
        <br/>
        23
        <br/>
        24
        <br/>
        25
        <br/>
        26
        <br/>
        27
        <br/>
        28
        <br/>
        29
        <br/>
        30
    </p>
    <div> Wellcome to the bottom dude!</div>

</div> <!-- End of the content -->


<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Footer >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->


        <div data-role="footer" data-id="persist" data-iconpos="top" data-position="fixed" data-theme="b">
            <div data-role="navbar">
                <ul>
                    <li>
                        <a href="#" data-theme="" data-icon="star"> Test </a>
                    </li>
                    <li>
                        <a href="#" data-theme="" data-icon="info"> Test2 </a>
                    </li>
                </ul>
            </div>
        </div>

<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->

    </div> <!-- End of the page -->

    </body>
</html>

Step by step bug test1

Step by step bug test2

Step by step bug test3

Step by step bug test4

您可以在GitHub上找到该演示：的 https://github.com/Hexodus/iScroll_Jumpbug

There is even the apk file 当您想快速浏览一下时（您的手机应该是Android 2.2或2.3）：

或者您可以通过QR码快速安装它： Qr code for android demo iscroll jump but

顺便说一下 - I really can't replicate this bug on jsfiddle因为它不会发生在那里。 Jsfiddle正在改变某些东西，因此页面甚至没有正确显示。

我非常需要你的协助人员。

在Android 2.x上使用JQM开关元素时，iScroll跳转到页面底部并卡在那里

0 个答案: