5.1w+
社区成员
22.3w+
社区内容
- 主页
触屏版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>
...全文
还没有回复，快来抢沙发～