重写移动端滚动条[iScroll.js核心代码]

最近写组件库的时后,发现这个滚动条是真的丑啊,决定重新撸一个滚动条:

首先咱们回顾一下移动端浏览器滚动条特性:

  • 滚动条在开始滚动时渐显,滚动结束后渐隐
  • 滚动条不占内容区宽度,悬浮固定
  • 滚动条高度(深灰)和滚动区可视高度(浅灰)比等于滚动区可视高度和滚动目标的高度
  • 当滚动目标的高度小于滚动区可视高度的时候,滚动条不显示,并且无法滚动
  • 只有在滚动滚动目标时,才能触发滚动
  • 当滚动条顶部触顶和底部触底的时候,不能继续滚动
  • 只有在滚动大于一个固定值时,才被视为滚动开始
  • 根据滚动的差值,计算是向上滚动还是向下滚动
  • 滚动条是动态生成的

好啦,接下来咱们开始一步一步实现,需要哪些知识点:

  • 渐隐渐显

opacity: 1; transition: opacity 500ms ease-in-out;

opacity: 0; transition: opacity 500ms ease-in-out;
复制代码
  • 悬浮固定

position 定位
滚动条宽度width为3px;
复制代码
  • 声明变量

var conHeight = contentBox.offsetHeight;        //滚动目标的整体高度
var _width = mainBox.clientWidth;               //滚动可视区的宽度
var _height = mainBox.clientHeight;             //滚动可视区的高度
var _scrollWidth = element.offsetWidth;         //滚动条的宽度
var _left = _width - _scrollWidth;              //定位滚动条应该距离左边宽度
复制代码

看到这里是不是有种一目了然的感觉,所以滚动条的宽度就是:
var _scrollHeight = parseInt(_height * (_height / conHeight))

  • 当滚动目标的高度小于滚动区可视高度的时候,滚动条不显示,反之则显示,不过透明度为0,哈哈,是不是很贱...

切记不显示和透明度为0还是不一样的


if (_scrollHeight >= mainBox.clientHeight) {
    element.parentNode.style.display = "none";
} else {
    element.parentNode.style.opacity = "0"; //有滚动条的话先将透明度设置为0
}
复制代码
  • 只有在滚动滚动目标时,才能触发滚动

//如果滚动的不是目标元素,此处只有触摸的是a时才能滚动,否则直接return;
if (event.changedTouches[0].target.tagName !== 'A') return false;
复制代码
  • 当滚动条顶部触顶和底部触底的时候,不能继续滚动

if (elT === '0rem' && this.direction == '1') console.log('到顶了不要再向上滑了');
if (elT === parseInt(elParentH) - parseInt(elH) + 'rem' && this.direction == '0') console.log('到底了不要再往下滑了');
复制代码
  • 只有在滚动大于一个固定值时,才被视为滚动开始

这里我们暂且设置这个最小移动高度为 minRange = 10;

  • 根据滚动的差值,计算是向上滚动还是向下滚动,怎么判断滚动差值呢,好,clientY来了
  • 滚动条是动态生成的,这个好办,直接粘代码:

var _scrollBox = doc.createElement('div');
var _scroll = doc.createElement('div');
_scrollBox.appendChild(_scroll);
_scroll.className = className;
mainBox.appendChild(_scrollBox);
复制代码

好了,接下来就是最关键的时候了,怎么去把这些逻辑联动起来呢,这时候HTML5触摸事件就粉墨登场了:touchstart touchmove touchend三剑客 具体怎么使用,大家就自行百度了,下面附上我的项目代码:供各位大神阅览: Github地址

有不懂或者有疑问,欢迎大家留言。

原文地址:https://www.cnblogs.com/datiangou/p/10125369.html

时间: 2024-10-30 08:50:48

重写移动端滚动条[iScroll.js核心代码]的相关文章

[技术分享] 融云开发案例核心代码分享

该套代码为从项目案例中提取的,可以直接拿去使用,主要包含了单聊及消息的处理.主要分三个页面处理完成,入口首页(index).消息列表页(message).会话页面(chat)index.html 页面(app入口页面) var rong; apiready=function(){ rong = api.require('rongCloud2'); //判断用户登录成功后执行方法 rongCloud(); } function rongCloud(){ //初始化 init(); //消息的监听,

jquery——移动端滚动条插件iScroll.js

官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ 'Carousel' demo iScroll功能很强大,目前我只用来 自定义滚动条 以下简单介绍一下iscrol在移动端自定义滚动条时的使用和注意事项. 一.用法 iScroll对要滚动的元素进行初始化,且不限制一个页面中使用iScroll的元素个数. 使用iScroll时,DOM树的结构要足够

移动端下拉刷新,iScroll.js用法(转载)

分享是传播.学习知识最好的方法 [作者]:挨踢前端 [出处]:http://www.cnblogs.com/duanhuajian/ [声明]:所有博文标题后加(share)的表示收集的他人优秀文章,其余的则为原创. 官网:http://cubiq.org/iscroll-4 概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码.这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android 这些系统上广泛使用)提供了一种本地化的方式来对一个

js取滚动条的尺寸实例代码

分享一个js取滚动条的尺寸的函数代码,很简单,很实用. 创建一个嵌套节点,让外层节点产生滚动条,然后用offsetWidth - clientWidth即可获得滚动条宽度. 注意,为了避免页面抖动,可以设置外层元素position:absolute和visibility:hidden 完整代码: function getScrollWith(){ var wrap = setAttributes(document.createElement('div'),{ style : { width :

iscroll.js 移动端手触滚动效果。

function loaded() {  var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});}window.addEventListener("load",loaded,false); http://www.gafish.net/api/iScroll.html http://www.cnblogs.com/aaronjs/p/3147470.html iscroll.j

zepto.js + iscroll.js上拉加载 下拉加载的 移动端 新闻列表页面

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width,initial-scale=1.0

Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码

前端 <script type="text/javascript"> $(function(){ $("#tid").keyup(function(){ //获取当前输入 的值 var value=$(this).val(); //偷偷摸摸发起请求 var url="${pageContext.request.contextPath }/like" var params="name="+value; //先清空下方

diy 滚动条 样式 ---- 核心代码

.choice-tag { width: 341px; height: 30px; overflow: hidden; overflow-x: auto; white-space: nowrap; position: relative; z-index: 97; display: inline-block; margin: 4px 0 0 5px; /* diy 滚动条核心代码 */ &::-webkit-scrollbar{ /*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖

iScroll.js的用法

一.iScroll.js的用法 概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码.这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android 这些系统上广泛使用)提供了一种本地化的方式来对一个限定了高度和宽度的元素的内容进行滑动.很不幸的是,这种情况下所有的web应用的页面就不能够包含具有position:absolute的头.页尾或者是一个内容可滚动的中间区域. 然而,Android系统最新修订版已经可以支持这种功能了(尽管支持的力