触屏版web，绑定swipe后页面滚动失效的问题。

deiphi 2014-01-27 09:36:43

屏幕滑动之后，页面就不能滚动了，请问怎么解决啊？



<!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>

...全文

449 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

mhzglm123 2016-03-15

打赏
举报

在js中加入下面的代码，上下滑屏就恢复了 $(document).swipe( { swipeStatus:function(event, phase, direction, distance, duration,fingerCount){ if (direction === "up") { $(document).scrollTop($(document).scrollTop() + distance); } if (direction === "down") { $(document).scrollTop($(document).scrollTop() - distance); } } });

deiphi 2014-04-22