手机端触屏滚动效果

因为现在做的项目在手机上的，而使用 overflow: scroll;用自带的滚动效果在IOS的手机上很卡不知道什么原因,同事建议自己写一个这样的效果来解决,所以找了下资料自己弄了下目前效果还不知道这么样先贴上来备份一下不知道项目中要不要改！！！

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <style type="text/css">
    html,body,h1,h2,h3,h4,p{
      margin:0;
      padding:0;
    }
    a{
      text-decoration: none
    }
    .btn {
      border-radius: 10px;
      display: block;
      font-size:16px;
      text-align: center;
      color:#fff;
      width: 120px;
      height: 40px;
      line-height: 40px;
      background-color: #44B549;
    }
    .btn:active{
      background-color: #2f9833;
    }
    .alert-mask {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 99;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.65);
        display: -webkit-box;
        -webkit-box-align: center;
        -webkit-box-pack: center;
    }
    .alert-box {
        width: 6.133333rem;
        height: auto;
        padding: .533333rem .533333rem .4rem;
        background-color: #fff;
        border-radius: .133333rem;
    }
    .alert-title {
        width: 100%;
        line-height: 1;
        color: #000;
        font-weight: 700;
        text-align: center;
        margin-bottom: .8rem;
        font-size: 15px;
    }
    .alert-body {
        margin-bottom: .666667rem;
    }
    #parent{
        height: 5rem;
        overflow: hidden;
    }
    #clauseBox {
        text-align: left;
        font-size: .375rem;
        position: relative;
        top:  0;
        left: 0;
    }
  </style>
</head>
<body>
<div class="alert-mask" id="dialog1479978164631"><div class="alert-box animated fadeInUp"><div class="alert-title">服务条款</div><div class="alert-body">
<div id="parent">
    <div id="clauseBox" class="clauseBox" style="top:0px;">
      <p>撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人</p>
      <p>撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人</p>
      <p>撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人</p>
      <p>撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人</p>
      <p>撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人</p>
      <p>撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人</p>
      <p>撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人</p>
      <p>撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人</p>

    </div>
    </div>
</div>
<div class="alert-bottom"><div class="alert-btn alert-cancel">返回</div><div class="alert-btn alert-sure">确定</div></div></div></div>
<script src="test.js"></script>
<script type="text/javascript">
    var s = new TouchScroll({ID:‘clauseBox‘,timer:300,frd:‘parent‘})
</script>
</html>

js:

function TouchScroll(obj){
    this.frd = document.getElementById(obj.frd),
    this.ID = document.getElementById(obj.ID),
    this.timer = obj.timer,
    this.lastY = 0,
    this.startY = 0,
    this.height = 0,
    this.sTop = 0,
    this.scrollHeight = this.ID.clientHeight - this.frd.clientHeight,
    this.frdHeight = this.frd.clientHeight,
    this.conHeight = this.ID.clientHeight,
    this.lastMoveTime = 0,//一下是缓动参数
    this.lastMoveStart = 0,
    stopInertiaMove = false;//停止缓动滚动
    this.init();
}
TouchScroll.prototype={
    init: function(){
        var that = this;
        that.ID.addEventListener(‘touchstart‘, function(e){
            that.start(e);
        });
        that.ID.addEventListener(‘touchmove‘, function(e){
            that.move(e);
        });
        that.ID.addEventListener(‘touchend‘, function(e){
            that.end(e);
        });
    },
    start: function(e){
        var that = this;
        document.addEventListener(‘touchmove‘,function(ev){
            ev.preventDefault();
        });
        that.lastY = that.startY = e.targetTouches[0].pageY;
        //下面是缓动
        that.lastMoveStart = that.lastY;
        that.lastMoveTime = Date.now();
        that.stopInertiaMove = true;
    },
    move: function(e){
        var that = this;
        var nowY = e.targetTouches[0].pageY;
        var changeY = nowY - that.lastY;
        that.sTop = parseInt(that.ID.style.top) + changeY
        if (that.sTop >= 0) {that.sTop = 0}else if(Math.abs(that.sTop) > that.scrollHeight){
            console.log(-(that.scrollHeight));
            that.sTop = -(that.scrollHeight);
        };
        that.ID.style.top = that.sTop + "px";
        //console.log(this.frd.style.top);
        that.lastY = nowY;
        //下面是缓动
        var nowTime = Date.now();
        that.stopInertiaMove = true;
        if(nowTime - that.lastMoveTime >300){
            that.lastMoveTime = nowTime;
            that.lastMoveStart = that.lastY;
        }
    },
    end: function(e){
        var that = this;
        document.removeEventListener(‘touchmove‘,function(ev){
            ev.preventDefault();
        });
        var nowY = e.changedTouches[0].pageY;//touchend事件不存在targetTouches和touches
        var changeY = nowY - this.lastY;
        var contentY = parseInt(this.ID.style.top) + changeY;
        this.ID.style.top = contentY + "px";
        this.lastY = nowY;
        //下面缓动
        var nowTime = Date.now();
        var v = (nowY - that.lastMoveStart)/(nowTime - that.lastMoveTime);//最后一划平均速度
        console.log(v)
        that.stopInertiaMove = false;
        (function(v,startTime,contentY){
            var updown = v>0?-1 :1;//加速度方向正数向上，负数向下
            var everyidle =  updown*0.0006;//每次消耗时间
            var tozerotime = v/everyidle;//速度到0需要多少时间（多少次）
            var distance = v * tozerotime / 2;//移动距离（缓动变慢至0距离减半）
            function inertiaMove(){
                if (that.stopInertiaMove) {return};
                var theTime = Date.now();
                var t = theTime - startTime;//缓动时间差
                var nowV = v + t*everyidle;
                console.log(t+‘时间‘)
                console.log(updown+‘方向‘);
                console.log(nowV+‘变化后距离‘);
                console.log(everyidle+‘每次消耗‘);
                console.log(updown*nowV+‘判断结束‘)
                // 速度方向变化表示速度达到0了
                if (updown*nowV > 0) {
                    console.log(‘速度到0结束‘)
                    return;
                }
                var moveY = (v + nowV)/2 * t;//每次在时间内的平均速度乘以时间得到移动距离
                that.ID.style.top = (contentY + moveY) + "px";
                console.log(contentY + moveY);
                setTimeout(inertiaMove, 10);
            }
            inertiaMove();
        })(v,nowTime,contentY)//nowTime是触发end的时间作为缓动开始时间
    }
}
window.TouchScroll = TouchScroll;
时间： 2024-10-29 19:09:45

手机端触屏滚动效果的相关文章

swiper.js-搭建微信、手机端全屏广告效果

swiper.js http://www.swiper.com.cn/  官方网站,下载的类库和要用那些api我们都需在这里查找 http://www.swiper.com.cn/demo/senior/index.html各种效果,我们要做的就是这种 我们简单发现,就是每一屛会出现动画(css3 animation),切换的当前屏会重新执行动画,可推出,没显示的屏删除了动画 看我们发现了什么?看第一张firebug截图 每一屛就是一个section标签, 在当前显示的section上有了其他兄

css3 手机端翻屏切换效果

原理是基于css3的 1.景深:perspective:100px; 2.中心点:transform-origin:center center 0; 3.transform-style:preserve-3d  父级作变换会保留效果到子集上面 通过节点嵌套 实现立方体效果: <div class="box"> <div class="div"> <div> <span>1</span> <div>

手机端实现fullPage——全屏滚动效果

封装了一个小插件模拟fullPage的全屏滚动效果,比较简单. 特点: 1.  纯js实现,小巧轻便. 2.  兼容性好.苹果.安卓都没问题,暂时没遇到问题机型. 缺点: 1.  仅封装了基础功能,HTML.css么有去封装.个人觉得不封装更方便大家使用. 接下来看看效果图: 相比效果大家都看到了,接下来看看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&

用jQuery.touchSwipe插件实现手机端场景滑动切换效果

使用jQuery的touchSwipe插件监听触摸滑动事件,结合css3实现手机端场景滑动切换效果.最好在手机端测试代码,也可以在PC端用鼠标点击模拟滑动. 1.html代码: <div class="container"> <div class="page page0 page_current"> <h1>你好,我是0号屏幕,第一屏,鼠标单击向下/向上拖动</h1> </div> <div clas

手机端图片滑动切换效果

最近公司要求开发wap版本页面,碰到了个图片滑动切换效果,折腾了半天,自己封装了一个比较通用的小控件,在此分享一下. 大概功能:可以自定义是否自动切换,支持单手滑动图片进行切换,支持左右滑动切换.循环切换等等,具体可以拿demo代码自己本地试试,注意只支持手机端哦 大概思路:通过touchstart.touchmove.touchend 三个事件加上css3的3d变化效果配合,实现滑动切换图片, 开发是基于Zepto框架,当然也支持其他任何一款手机端框架,只需将代码中的美元符号$换为指定框架操作

全屏滚动效果H5FullscreenPage.js

前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto.js 功能清单: 1 快速实现页面全屏滚动效果.并提供多种翻页效果,兼容大部分ios和android系统. 2 支持在页面中添加多种动画元素效果 来实现淡入,滑入等效果. 3 支持配置音乐功能. 4 支持摇一摇接口功能. 组件核心代码原理: 1 页面滚动 在移动页面上如果想使用滚动,如过没有任何动画

jQuery手机端触摸卡片切换效果

效果:http://hovertree.com/code/run/jquery/a1gr3gm9.html 可以用手机查看效果. 代码如下: 1 <!doctype html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=ed

js全屏滚动效果

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>全屏滚动代码测试</title> 6 <style type="text/css"> 7 body,ul,li{ margin: 0; padding: 0;} 8 #tbody{ overflow: hidden; clear: both;

pagePiling.js - 创建美丽的全屏滚动效果

在线演示 在线演示 本地下载 全屏滚动效果是近期很流行的网页设计形式,带给用户良好的视觉和交互体验. pagePiling.js 这款jQuery插件能够帮助前端开发者轻松实现这样的效果.支持全部的主流浏览器,包含IE8+.支持移动设备.