Ipad(IOS 5以前)的safari浏览器下，如何实现单指滑动Scroll （ html + Jquery 实现）

最新推荐文章于 2021-06-10 15:52:47 发布

luyang1016

最新推荐文章于 2021-06-10 15:52:47 发布

阅读量5.9k

点赞数 2

文章标签： scroll jquery ipad safari html 浏览器

本文链接：https://blog.csdn.net/luyang1016/article/details/7205558

版权

闭月羞花猫 2012年1月于河西新城科技园

项目上有个要求：

一个Jquery的项目，需要在ipad上面，对于横向，纵向的scroll bar需要能实现单指滑动的效果。

似乎目前的ipad(IOS5以前)版本，对于scrollbar的单指滑动不能很好的支持。

注：IOS5版本则不需要做任何的特殊的script，只需要用html自带的overflow属性就可以了。

于做了一个类：

闲话不说，先上代码（可以全部拷贝下来测试，但是请注意，因为是jquery，所以需要引用一个“jquery-1.6.2.js”的文件，可网上下载）

代码如下：

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