触屏单指滑动

最新推荐文章于 2024-08-12 09:24:46 发布

cping927

最新推荐文章于 2024-08-12 09:24:46 发布

阅读量243

点赞数

分类专栏：移动开发文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/cping927/article/details/84539930

版权

移动开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

cping927

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
触屏单指滑动

[code="html"] Jquery Ipad下如何支持单指滑动Scroll // 定义一个ScrollCommon的类var ScrollCommon = function() { // 横向Scroll的单指滑动 this.touchScrollX = function (selector) { var scro...
复制链接

扫一扫

专栏目录