重写移动端滚动条[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>