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

来源：互联网发布：联想网络控制工具编辑：程序博客网时间：2024/06/05 03:18

闭月羞花猫 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>

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

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