deiphi 2014年01月27日
触屏版web,绑定swipe后页面滚动失效的问题。
屏幕滑动之后,页面就不能滚动了,请问怎么解决啊?


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Moblie </title>
<script src="http://lib.sinaapp.com/js/jquery/2.0.3/jquery-2.0.3.min.js"></script>
<script>

$(function(){
var $wrap = $("#swipebox");
$wrap
.swipeEvents()
.on("swipeDown", function(){
$('#loading').html("Swipe Down");
});
});


(function($) {
$.fn.swipeEvents = function() {
return this.each(function() {

var startX,
startY,
$this = $(this);

$this.on('touchstart', touchstart);

function touchstart(event) {
var touches = event.originalEvent.touches;
if (touches && touches.length) {
startX = touches[0].pageX;
startY = touches[0].pageY;
$this.on('touchmove', touchmove);
}
event.preventDefault();
}

function touchmove(event) {
var touches = event.originalEvent.touches;
if (touches && touches.length) {
var deltaX = startX - touches[0].pageX;
var deltaY = startY - touches[0].pageY;

if (deltaX >= 50) {
$this.trigger("swipeLeft");
}
if (deltaX <= -50) {
$this.trigger("swipeRight");
}
if (deltaY >= 50) {
$this.trigger("swipeUp");
}
if (deltaY <= -50) {
$this.trigger("swipeDown");
}
if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) {
$this.off('touchmove', touchmove);
}
}
event.preventDefault();
}

});
};
})(jQuery);


</script>



<style>
.swipebox{width:100%;background:gray;}
</style>
</head>

<body>
<div id="loading"></div>
<div id="swipebox" class="swipebox">
<p>swipe1</p>
<p>swipe2</p>
<p>swipe3</p>
<p>swipe4</p>
<p>swipe5</p>
<p>swipe6</p>
<p>swipe7</p>
<p>swipe8</p>
<p>swipe9</p>
<p>swipe10</p>
<p>swipe11</p>
<p>swipe12</p>
<p>swipe13</p>
<p>swipe14</p>
<p>swipe15</p>
<p>swipe16</p>
<p>swipe17</p>
<p>swipe18</p>
<p>swipe19</p>
<p>swipe20</p>
<p>swipe21</p>
<p>swipe22</p>
<p>swipe23</p>
<p>swipe24</p>
<p>swipe25</p>
<p>swipe26</p>
<p>swipe27</p>
<p>swipe28</p>
<p>swipe29</p>
<p>swipe30</p>
<p>swipe31</p>
<p>swipe32</p>
<p>swipe33</p>
<p>swipe34</p>
<p>swipe35</p>
<p>swipe36</p>
<p>swipe37</p>
<p>swipe38</p>
<p>swipe39</p>
<p>swipe40</p>
<p>swipe41</p>
<p>swipe42</p>
<p>swipe43</p>
<p>swipe44</p>
<p>swipe45</p>
<p>swipe46</p>
<p>swipe47</p>
<p>swipe48</p>
</div>


</body>
</html>
...全文
357 点赞 收藏 6
写回复
6 条回复

还没有回复,快来抢沙发~

发动态
发帖子
JavaScript
创建于2007-09-28

5.1w+

社区成员

22.3w+

社区内容

Web 开发 JavaScript
社区公告
暂无公告