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

概述闭月羞花猫 2012年1月于河西新城科技园项目上有个要求：一个Jquery的项目，需要在ipad上面，对于横向，纵向的scroll bar需要能实现单指滑动的效果。似乎目前的ipad(IOS5以前)版本，对于scrollbar的单指滑动不能很好的支持。注：IOS5版本则不需要做任何的特殊的script，只需要用html自带的overflow属性就可以了。于做了一个类：闲话不说，先上

闭月羞花猫 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" >        <ul>            <script>            for (var i=0; i<50; i++) {                document.write("<li style='white-space:nowrap;'>我是第" + i + "行数据！！！闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫</li>");            }            </script>        </ul>    </section></body></HTML>

总结

以上是内存溢出为你收集整理的Ipad(IOS 5以前)的safari浏览器下，如何实现单指滑动Scroll （ html + Jquery 实现）全部内容，希望文章能够帮你解决Ipad(IOS 5以前)的safari浏览器下，如何实现单指滑动Scroll （ html + Jquery 实现）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1092636.html