重写移动端滚动条[iScroll.js核心代码]
最近写组件库的时后,发现这个滚动条是真的丑啊,决定重新撸一个滚动条:
首先咱们回顾一下移动端浏览器滚动条特性:
- 滚动条在开始滚动时渐显,滚动结束后渐隐
- 滚动条不占内容区宽度,悬浮固定
- 滚动条高度(深灰)和滚动区可视高度(浅灰)比等于滚动区可视高度和滚动目标的高度
- 当滚动目标的高度小于滚动区可视高度的时候,滚动条不显示,并且无法滚动
- 只有在滚动滚动目标时,才能触发滚动
- 当滚动条顶部触顶和底部触底的时候,不能继续滚动
- 只有在滚动大于一个固定值时,才被视为滚动开始
- 根据滚动的差值,计算是向上滚动还是向下滚动
- 滚动条是动态生成的
好啦,接下来咱们开始一步一步实现,需要哪些知识点:
- 渐隐渐显
```
opacity: 1; transition: opacity 500ms ease-in-out;
opacity: 0; transition: opacity 500ms ease-in-out;
复制代码
<ul><li>悬浮固定</li>
</ul>
position 定位
滚动条宽度width为3px;
复制代码
<ul><li>声明变量</li>
</ul>
var conHeight = contentBox.offsetHeight; //滚动目标的整体高度
var _width = mainBox.clientWidth; //滚动可视区的宽度
var _height = mainBox.clientHeight; //滚动可视区的高度
var _scrollWidth = element.offsetWidth; //滚动条的宽度
var _left = _width - _scrollWidth; //定位滚动条应该距离左边宽度
复制代码
<blockquote>
<p>看到这里是不是有种一目了然的感觉,所以滚动条的宽度就是:<br /><code>var _scrollHeight = parseInt(_height * (_height / conHeight))</code></p>
</blockquote>
<ul><li>当滚动目标的高度小于滚动区可视高度的时候,滚动条不显示,反之则显示,不过透明度为0,哈哈,是不是很贱...</li>
</ul><blockquote>
<p>切记不显示和透明度为0还是不一样的</p>
</blockquote>
if (_scrollHeight >= mainBox.clientHeight) {
element.parentNode.style.display = "none";
} else {
element.parentNode.style.opacity = "0"; //有滚动条的话先将透明度设置为0
}
复制代码
<ul><li>只有在滚动滚动目标时,才能触发滚动</li>
</ul>
//如果滚动的不是目标元素,此处只有触摸的是a时才能滚动,否则直接return;
if (event.changedTouches[0].target.tagName !== 'A') return false;
复制代码
<ul><li>当滚动条顶部触顶和底部触底的时候,不能继续滚动</li>
</ul>
if (elT === '0rem' && this.direction == '1') console.log('到顶了不要再向上滑了');
if (elT === parseInt(elParentH) - parseInt(elH) + 'rem' && this.direction == '0') console.log('到底了不要再往下滑了');
复制代码
<ul><li>只有在滚动大于一个固定值时,才被视为滚动开始</li>
</ul><blockquote>
<p>这里我们暂且设置这个最小移动高度为 minRange = 10;</p>
</blockquote>
<ul><li>
<p>根据滚动的差值,计算是向上滚动还是向下滚动,怎么判断滚动差值呢,好,clientY来了</p>
</li>
<li>
<p>滚动条是动态生成的,这个好办,直接粘代码:</p>
</li>
</ul>
var _scrollBox = doc.createElement('div');
var _scroll = doc.createElement('div');
_scrollBox.appendChild(_scroll);
_scroll.className = className;
mainBox.appendChild(_scrollBox);
复制代码
<p>好了,接下来就是最关键的时候了,怎么去把这些逻辑联动起来呢,这时候HTML5触摸事件就粉墨登场了:touchstart touchmove touchend三剑客 具体怎么使用,大家就自行百度了,下面附上我的项目代码:供各位大神阅览: <a href="https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FQTFYING%2FExample%2Fblob%2Fmaster%2Fhtml%2Fpopover-scroll.html" rel="nofollow">Github地址</a></p>
<p>有不懂或者有疑问,欢迎大家留言。</p>
重写移动端滚动条[iScroll.js核心代码]的更多相关文章
- 移动端布局 + iscroll.js
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- H5页面基于iScroll.js插件实现下拉刷新,上拉加载更多
前言 在我之前的项目中,页面总是干巴巴的,用户的体验不是特别完美,我也是一直觉得把设计师给到的psd做出来就好,很少考虑用户的感受.我喜欢看不同的App,操作每个步骤,观赏每个能和我互动的交互设计效果 ...
- jquery——移动端滚动条插件iScroll.js
官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ ...
- 关于使用Iscroll.js异步加载数据后不能滑动到最底端的问题解决方案
关于使用Iscroll.js异步加载数据后不能滑动到最底端,拉到最下边又弹回去的问题困扰了我老半天,相信很多朋友都遇到了.我刚好不小心解决了,和大家分享一下.由于各种忙,下边就直接上代码吧. (前提是 ...
- 阻止pc端浏览器缩放js代码
阻止pc端浏览器缩放js代码 众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable= ...
- zepto.js + iscroll.js上拉加载 下拉加载的 移动端 新闻列表页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- diy 滚动条 样式 ---- 核心代码
参考自 : https://blog.csdn.net/qq_38881495/article/details/83689721 .chapter_data position relative wid ...
- Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码 其中有json的一句话解释
前端 <script type="text/javascript"> $(function(){ $("#tid").keyup(function( ...
- 移动端下拉刷新,iScroll.js用法(转载)
本文转载自: iScroll.js 用法参考 (share)
随机推荐
- AtCoder AGC030B Tree Burning
题目链接 https://atcoder.jp/contests/agc030/tasks/agc030_b 题解 细节好题.. 首先假设第一步往右走,那么可以发现当拐弯的次数一定时路径是唯一的 于是 ...
- Js基础知识(一) - 变量
js基础 - 变量 *大家对js一定不会陌生,入门很简单(普通入门),很多人通过网络资源.书籍.课堂等很多途径学习js,但是有些js基础的只是往往被大家遗漏,本章就从js变量类型来说一说js 变量类型 ...
- Idea如何生成JPA的相关model,以及运行JPA项目的时候启动错误
1.如何生成JPAmodel 按照顺序执行下面的步骤 为指定的项目添加JPA的配置,这样之后生成的model就会在指定的项目内 选择JPA之后默认不用操作直接添加 没有Persistence的可以在w ...
- 实现shape图层添加label
void CmapwingisTest2View::OnToolsAdd32780() { TCHAR szFilters[]= _T("SHP Files (*.shp)|*.shp||& ...
- LeetCode 92. 反转链表 II(Reverse Linked List II)
题目描述 反转从位置 m 到 n 的链表.请使用一趟扫描完成反转. 说明: 1 ≤ m ≤ n ≤ 链表长度. 示例: 输入: 1->2->3->4->5->NULL, ...
- SAP MaxDB日常运维—启动、关闭、磁盘扩容
SAP MaxDB日常维护1.检查MaxDB状态,并启动su - pe0csccd /sapdb/SDB/db/bin./dbmcli -d SDB -u superdba,Mypassword db ...
- leetcode 172. Factorial Trailing Zeroes(阶乘的末尾有多少个0)
数字的末尾为0实际上就是乘以了10,20.30.40其实本质上都是10,只不过是10的倍数.10只能通过2*5来获得,但是2的个数众多,用作判断不准确. 以20的阶乘为例子,造成末尾为0的数字其实就是 ...
- Centos 搭建DNS服务器
1:安装DNS服务 yum install bind -y 2:修改/etc/named.conf 配置文件 listen-on port 53 { any; }; listen-on-v6 port ...
- Python学习之==>迭代器
一.概要 在了解Python的数据结构时,容器(container).可迭代对象(iterable).迭代器(iterator).生成器(generator).列表/集合/字典推导式(list,set ...
- sql server 字符串拆分
最近项目调取存储的时候直接传入string 作为in的查询范围,结果报错了,深思之后才发现,数据库对于传进来的String,并不是我们想的直接可以作为参数,而是作为一个整体,而in是需要一个类似arr ...