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利用Array.splice实现Array的insert/remove
Jan 13 Javascript
jquery下json数组的操作实现代码
Aug 09 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
浅谈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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
4.与数据库的连接
2006/10/09 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
html5的localstorage详解
2017/05/09 HTML / CSS
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
技术总监的工作职责
2013/11/13 职场文书
财政局长自荐信范文
2013/12/22 职场文书
读书月活动方案
2014/05/22 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书