触屏单指滑动

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title> Jquery Ipad下如何支持单指滑动Scroll </title>
<script src="./js/jquery-1.6.2.js"/>

<script>
// 定义一个ScrollCommon的类
var ScrollCommon = function() {
  
     // 横向Scroll的单指滑动
     this.touchScrollX = function (selector) {
		var scrollStartPos = 0;
		$(selector).live('touchstart', function(event) {
			scrollStartPos = this.scrollLeft + event.originalEvent.touches[0].pageX;
		});
		$(selector).live('touchmove', function(event) {
			if ((this.scrollLeft < this.scrollWidth - this.offsetWidth &&
                 this.scrollLeft + event.originalEvent.touches[0].pageX < scrollStartPos - 5) ||
                (this.scrollLeft != 0 &&
                 this.scrollLeft + event.originalEvent.touches[0].pageX > scrollStartPos + 5)) {
	        	event.preventDefault();  
			}
			this.scrollLeft = scrollStartPos - event.originalEvent.touches[0].pageX;
		});
    };
    
    // 纵向Scroll的单指滑动
    this.touchScrollY = function (selector) {
			var scrollStartPos = 0;
			$(selector).live('touchstart', function(event) {
				scrollStartPos = this.scrollTop + event.originalEvent.touches[0].pageY;
			});
			
			$(selector).live('touchmove', function(event) {
		        if ((this.scrollTop < this.scrollHeight - this.offsetHeight &&
		             this.scrollTop + event.originalEvent.touches[0].pageY < scrollStartPos - 5) ||
		            (this.scrollTop != 0 &&
		             this.scrollTop + event.originalEvent.touches[0].pageY > scrollStartPos + 5)) {
		        	event.preventDefault();  
				}
				this.scrollTop = scrollStartPos - event.originalEvent.touches[0].pageY;
			});
      };  
 };
 
// 本机能的js事件
$(function(){
     var commonJs = new ScrollCommon();
     // 注册本机能的横向Scroll的单指滑动事件
     commonJs.touchScrollX('#optionScroll');
     // 注册本机能的纵向Scroll的单指滑动事件
     commonJs.touchScrollY('#optionScroll');
});
</script>
</head>
<body>
    <section id="optionScroll" style="overflow:auto;height:300px;width:600px;border:1px red solid;margin:60px auto auto 80px">
        <ul>
            <script>
            for (var i=0; i<50; i++) {
                document.write("<li style='white-space:nowrap;'>我是第" + i + "行数据！！！闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫</li>");
            }
            </script>
        </ul>
    </section>
</body>
</html>
猜你喜欢
