js 简易版滚动条实例(适用于移动端H5开发)


Posted in Javascript onJune 26, 2017

废话不多说,直接上代码

<!DOCTYPE html>
<html>
<head>
  <title>滑动条</title>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <script type="text/javascript" src="./hScoll.js"></script>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }

  #content{
    margin-top: 50px;
    width:100%;
    height: 200px;
    background: #eeeeee;
    overflow: hidden;
    position: relative;
    /**transform: translate(0px, -70px);*/
  }
  #scoll{
    overflow: hidden;
  }

  #content2{
    margin-top: 50px;
    width:100%;
    height: 200px;
    background: red;
    overflow: hidden;
    position: relative;
    /**transform: translate(0px, -70px);*/
  }
  #scoll2{
    overflow: hidden;
  }

  .scrollbars{
    position: absolute;
    height: 100%;
    right: 0;
    top: 0;
    width: 5px;
    border-radius: 5px;
  }
  .scollb{
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    background: #999999;
    border-radius: 5px;
  }
</style>
<body>
  <div id="content">
    <div id="scoll">
      <p>1111</p>
      <p>2222</p>
      <p>3333</p>
      <p>4444</p>
      <p>5555</p>
      <p>6666</p>
      <p>7777</p>
      <p>8888</p>
      <p>9999</p>
      <p>0000</p>
      <p>aaaa</p>
      <p>bbbb</p>
      <p>cccc</p>
      <p>dddd</p>
      <p>eeee</p>
    </div>
  </div>
</body>
<script>
  var options ={
    interactiveScrollbars:true
  }
  window.hScoll.buildScoll('content',options);
</script>
</html>

js代码:

/**
 * Created by hechao on 2017/6/25.
 */
(function(){

  /**添加window对象hScoll属性*/
  window.hScoll = {


    buildScoll:function(el,options){
      App.init(el,options);
    }
  }

  var App = {

    /**初始化组件*/
    init:function(el,option){
      App.options = option;
      App.prevY = 0;
      App.el = document.getElementById(el);
      App.scoll = this.el.children[0];
      App.h = this.el.offsetHeight;//滑动范围高度
      App.ch = this.el.scrollHeight;//内容的高度
      if(parseFloat(this.h)<=parseFloat(this.ch)){
        App.sdiv = document.createElement('div');
        App.scollb = document.createElement('div');
        App.sdiv.setAttribute('class','scrollbars');
        App.scollb.setAttribute('class','scollb');
        App.scollb.style.height = parseFloat(this.h)*parseFloat(this.h)/parseFloat(this.ch) + 'px';
        App.el.appendChild(this.sdiv);
        App.sdiv.appendChild(this.scollb);
        App.initevent();
      }
    },

    /**绑定事件*/
    initevent:function (){
      App.el.addEventListener('touchstart', App.touchstart, false);
      App.el.addEventListener('touchmove', App.touchmove, false);
      App.el.addEventListener('touchend', App.touchend, false);
    },

    /**记录滑动初始位置*/
    touchstart:function(e){
      var point = App.getPoint(e);
      App.startY = point.pageY;
    },

    /**手指移动时,滚动条滚动*/
    touchmove:function(e){
      e.preventDefault();//阻止默认行为
      var point = App.getPoint(e);
      App.moveY = point.pageY;
      App.deltaY = App.startY - App.moveY;
      if((App.prevY - App.deltaY)<=0 && (App.prevY - App.deltaY)>= -(App.ch-App.h)){
        App.domove(App.prevY - App.deltaY);
      }
      if(App.options.interactiveScrollbars){
        App.domove2(App.prevY - App.deltaY);
      }else{
        if((App.prevY - App.deltaY)<=0 && (App.prevY - App.deltaY)>= -(App.ch-App.h)){
          App.domove2(App.prevY - App.deltaY);
        }
      }
    },

    /**手指离开时,判断位置*/
    touchend:function(e){
      App.prevY = App.prevY - App.deltaY;
      if(App.prevY >= 0){
        App.prevY = 0;
        App.domove(App.prevY,true);
        App.domove2(App.prevY,true);
      }
      if(App.prevY <= -(App.ch-App.h)){
        App.prevY = -(App.ch-App.h);
        App.domove(App.prevY,true);
        App.domove2(App.prevY,true);
      }
    },

    getPoint:function (e) {
      return e.touches ? e.touches[0] : e;
    },

    /**内容滑动*/
    domove:function (y,t){
      if(t){
        App.scoll.setAttribute('style', 'transform: translate(0px, '+y+'px);transition:transform 300ms ease');
      }else{
        App.scoll.setAttribute('style', 'transform: translate(0px, '+y+'px);transition:transform 0ms ease');
      }
    },

    /**滚动条滑动*/
    domove2:function(y,t){
      if(t){
        App.scollb.setAttribute('style', 'transform: translate(0px, '+-parseFloat(y)*parseFloat(App.h)/parseFloat(App.ch)+'px);transition:transform 0ms ease;height:'+parseFloat(App.h)*parseFloat(App.h)/parseFloat(App.ch) + 'px'+'');
      }else{
        App.scollb.setAttribute('style', 'transform: translate(0px, '+-parseFloat(y)*parseFloat(App.h)/parseFloat(App.ch)+'px);transition:transform 0ms ease;height:'+parseFloat(App.h)*parseFloat(App.h)/parseFloat(App.ch) + 'px'+'');
      }
    }
  }
})();

以上这篇js 简易版滚动条实例(适用于移动端H5开发)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
Jquery中删除元素的实现代码
Dec 29 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
iView框架问题整理小结
Oct 16 Javascript
vue-cropper组件实现图片切割上传
May 27 Vue.js
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 #Javascript
浅谈JS如何实现真正的对象常量
Jun 25 #Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 #Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 #Javascript
jQuery实现拖动效果的实例代码
Jun 25 #jQuery
JS检测window.open打开的窗口是否关闭
Jun 25 #Javascript
jQuery validata插件实现方法
Jun 25 #jQuery
You might like
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
php中stdClass的用法分析
2015/02/27 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
python 图片验证码代码分享
2012/07/04 Python
Python正则表达式介绍
2012/08/06 Python
Python中encode()方法的使用简介
2015/05/18 Python
10个Python小技巧你值得拥有
2018/09/29 Python
python实现学生通讯录管理系统
2021/02/25 Python
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
家庭户外服装:Hawkshead
2017/11/02 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
求职推荐信范文
2013/12/01 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
会计系毕业生求职信
2014/05/28 职场文书
生物技术专业求职信
2014/06/10 职场文书
结婚典礼主持词
2015/06/29 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
Python面向对象编程之类的概念
2021/11/01 Python