最近写组件库的时后,发现这个滚动条是真的丑啊,决定重新撸一个滚动条:
首先咱们回顾一下移动端浏览器滚动条特性:
- 滚动条在开始滚动时渐显,滚动结束后渐隐
- 滚动条不占内容区宽度,悬浮固定
- 滚动条高度(深灰)和滚动区可视高度(浅灰)比等于滚动区可视高度和滚动目标的高度
- 当滚动目标的高度小于滚动区可视高度的时候,滚动条不显示,并且无法滚动
- 只有在滚动滚动目标时,才能触发滚动
- 当滚动条顶部触顶和底部触底的时候,不能继续滚动
- 只有在滚动大于一个固定值时,才被视为滚动开始
- 根据滚动的差值,计算是向上滚动还是向下滚动
- 滚动条是动态生成的
好啦,接下来咱们开始一步一步实现,需要哪些知识点:
- 渐隐渐显
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