iScroll переходит на нижнюю часть страницы и застревает там при использовании переключателя JQM на Android 2.x
Я борюсь с этой ошибкой на выходных и не могу найти решение. В моем приложении JQuery Mobile есть несколько переключателей. При тестировании на Android 2.2 или 2.3 происходит странная ошибка: я немного прокручиваю вниз, чтобы добраться до переключателей, затем нажимаю на них жестом, и страница переходит вниз или даже вниз. С этого момента невозможно перейти к началу страницы! Кажется, прокручиваемая область как-то переопределена.
Я сделал простую демонстрацию, чтобы показать это поведение. Все из коробки. JQM, JQ, iScroll и iScrollview нетронуты и не имеют собственного кода.
Обновление Я только что сделал обновленный бранч на Github с JQM 1.3.2 - переключатели теперь работают, но ползунок диапазона не работает;/ Кажется, что-то похоже на событие slide, которое каким-то образом вызывает 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>
Вы можете найти демо на GitHub: https://github.com/Hexodus/iScroll_Jumpbug
Существует даже файл apk, когда вы хотите быстро взглянуть (ваш телефон должен быть Android 2.2 или 2.3):
Или вы можете быстро установить его через QR-код:
Кстати, я действительно не могу повторить эту ошибку на jsfiddle, потому что там этого не произошло. Jsfiddle что-то меняет, поэтому страница даже не отображается правильно.
Мне очень нужна ваша помощь, ребята.