前端ABC做了一个仿照pc端滚动条的功能，用来解决移动端ios下 scroll卡顿的bug。
目前的参数配置只有id，考虑将高度、是否显示隐藏滑块、样式设置加进去，并且兼容到pc中去。
目前只支持touch事件，可打开chrome的移动端模式，进行操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta charset="UTF-8">
<title>移动端滚动条测试</title>
<style>
.z-scroll{
width: 250px;
height: 400px;
padding: 10px;
background-color: #f0865c;
border-radius: 5px;
}
.z-scroll .z-scroll-box{
background-color: #f2f7f9;
border-radius: 5px;
height: 100%;
margin-right: 25px;
overflow: hidden;
}
.z-scroll .z-scroll-shank{
float: right;
width: 20px;
height: 100%;
text-align: center;
}
.z-scroll .z-scroll-shank:before{
display: inline-block;
content: '';
height: 100%;
width: 5px;
background-color: #6f2305;
}
.z-scroll .z-scroll-block{
display: inline-block;
width: 20px;
height: 40px;
border-radius: 4px;
background-color: #f7f979;
transform:translateY(-100px);
cursor:pointer;
}
.m-doc{
padding: 10px;
}
.m-doc img{
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div>
<h1>我是滚动的插件。</h1>
</div>
<div class="z-scroll" id="scroll">
<div class="z-scroll-shank">
<span class="z-scroll-block"></span>
</div>
<div class="z-scroll-box">
<div class="z-scroll-content">
<div class="m-doc">
<p>世人都爱美女，但对美的态度却模棱两可。欣赏艳羡的同时，又不免在内心嘀咕一句：生得一副好皮囊，真是独得上天厚爱，难怪一生顺风顺水花团锦簇呢。说到美女，尤其是民国美女，林徽因便是其中名声最大的了，只是有人奉她为女神，有人觉得她也不过是个“绿茶婊”而已，挽着个梁思成，念念不忘徐志摩，甚至还让人家金岳霖为她终身不嫁。这些评说里，大家都只将她视为女人、长得漂亮的女人，却忽略了她所做的事情。</p>
<p>林徽因曾说过：“真讨厌，什么美人、美人，好像女人没有什么事可做似的，我还有好些事要做呢！”在她看来，仅以“美人”来看待她，是对她的轻视。</p>
<p>为什么人人视为“福利”的美好容颜，在林徽因这里却成了苦恼呢？因为对林徽因的生命历程来说，姣好的容貌却是她身上最不足称道的东西。</p>
<strong>说到不忘初心，没有人比她做得更好</strong>
<p>你还记得十几岁时的梦想吗？想必没有多少人能回答：我一直在坚守梦想。但林徽因，十六岁受邻居女建筑师影响，立下投身建筑事业的志愿后，一生都在为这个梦想，不懈耕耘。</p>
<p>彼时，梁思成尚未确认志向，曾想子承父业学习西方政治，但被林徽因对建筑的高谈阔论改变了主意。甚至在谈婚论嫁时，她也以对方必须与自己到美国学习建筑为条件，对梁思成的一生的立志起了关键作用。她对自我理想和实现都有着清醒的认识，真让十点君汗颜。</p>
<p>不远万里赴美国留学，却得知建筑系不招女生。她便“曲线救国”，在美术系注册，但选修了建筑学的全部课程。她全身心投入课业，优异的成绩使她成为课程助教。在接受美国一家报纸的采访时，她自信地说：“我要带回什么是中西方碰撞的真正含义。”——学成归国，她与梁思成受聘于东北大学，创建建筑系，将留学时的经验用于学校。林徽因还设计了东北大学“白山黑水”的校徽。</p>
<img src="./images/img01.jpg" alt="">
<p>林徽因早年患肺疾，抗战期间颠沛流离，病情加剧为肺结核。但哪怕身患重疾（肺结核在当时属于不治之症），她依然与梁思成一路餐风露宿、翻山越岭，走遍中国15个省、200多个县，考察测绘了200多处古建筑。尤其是骑着毛驴寻觅到佛光寺时，身体羸弱的林徽因，亲自爬上长梯测量。</p>
<strong>不以诗人的美誉为荣，也不以被人恋爱为辱</strong>
<p>十六岁时，林徽因在英国与诗人徐志摩相识，后者很快便陷入了她清亮的眼眸里，甚至不惜为了她与妻子张幼仪离婚。徐志摩坦言，自己是因为林徽因才走上了诗歌的道路，她是落在他心湖里的一朵云，甘愿做她裙边的一株草，哪怕只能在凝望中爱着她。</p>
<p>林徽因最终选择了梁思成。她欣赏徐志摩的浪漫与飘逸，但睿智如她，并不任由感性来左右自己选择，就连张幼仪都评价她“是一位思想更复杂、长相更漂亮、双脚更自由的女士”。</p>
</div>
</div>
</div>
</div>
<script>
/** [zScroll description]constructor */
function zScroll(options) {
this.options = options || {};
if (this.options.id) {
this.container = document.getElementById(this.options.id);
//render ...
this.swiperPanel = this.container.children[1].children[0];
this.shank = this.container.children[0];
this.swiperBlock = this.shank.children[0];
this.initBlockPosition();
} else {
console.log('add the id of element');
}
};
/** [initBlockPosition description]初始化滑块位置 */
zScroll.prototype.initBlockPosition = function() {
if (this.shank && this.swiperBlock) {
var shank_ht = this.shank.offsetHeight;
this.swiperBlock.style.webkitTransform = 'translateY(-' + shank_ht + 'px)';
this.swiperPanel.style.webkitTransform = 'translateY(0px)';
this.moveBlock(shank_ht);
}
};
/** [moveBlock description]移动滑块位置 */
zScroll.prototype.moveBlock = function(shank_ht) {
var _this = this;
this.startY = 0;
this.y = 0;
this.startPanelY = 0;
this.panelY = 0;
this.aboveY = -shank_ht;
this.abovePanelY = 0;
if (_this.container) {
_this.container.addEventListener('touchstart', function(e) {
var target = e.target || e.srcElement;
if (target.className == _this.swiperBlock.className) {
_this.touchStart.call(_this, e);
} else if (_this.swiperPanel.contains(target)) {
_this.touchStartPanel.call(_this, e);
}
});
_this.container.addEventListener('touchmove', function(e) {
var target = e.target || e.srcElement;
if (target.className == _this.swiperBlock.className) {
_this.touchMove.call(_this, e);
} else if (_this.swiperPanel.contains(target)) {
_this.touchMovePanel.call(_this, e);
}
});
_this.container.addEventListener('touchend', function(e) {
var target = e.target || e.srcElement;
if (target.className == _this.swiperBlock.className) {
_this.touchEnd.call(_this, e);
} else if (_this.swiperPanel.contains(target)) {
_this.touchEndPanel.call(_this, e);
}
return true;
});
}
};
zScroll.prototype.touchStart = function(e) {
var touch = e.touches[0];
this.startY = touch.pageY;
e.preventDefault();
};
zScroll.prototype.touchMove = function(e) {
var touch = e.touches[0],
shank_ht = this.shank.offsetHeight,
block_ht = this.swiperBlock.offsetHeight;
this.y = parseInt(this.aboveY + touch.pageY - this.startY);
if (this.y <= -block_ht && this.y >= -shank_ht) {
this.swiperBlock.style.webkitTransform = 'translateY(' + this.y + 'px)';
this.moveSwipePanel();
} else {
if (this.y < -shank_ht) {
this.y = -shank_ht;
this.swiperBlock.style.webkitTransform = 'translateY(' + this.y + 'px)';
this.moveSwipePanel();
} else if (this.y > -block_ht) {
this.y = -block_ht;
this.swiperBlock.style.webkitTransform = 'translateY(' + this.y + 'px)';
this.moveSwipePanel();
}
}
e.preventDefault();
};
zScroll.prototype.touchEnd = function(e) {
var cssPanel = this.swiperPanel.style.webkitTransform,
cssBlock = this.swiperBlock.style.webkitTransform;
this.aboveY = cssBlock ? parseInt(cssBlock.split('(')[1].split(')')[0].replace('px', '')) : -this.shank.offsetHeight;
this.abovePanelY = cssPanel ? parseInt(cssPanel.split('(')[1].split(')')[0].replace('px', '')) : 0;
e.preventDefault();
};
/** [moveSwipePanel description]移动内容 */
zScroll.prototype.moveSwipePanel = function() {
var shank_ht = this.shank.offsetHeight;
var x1 = this.swiperPanel.offsetHeight - shank_ht,
x2 = shank_ht - this.swiperBlock.offsetHeight;
if (x2 != 0) {
var y2 = parseInt(x1 / x2 * (this.y + shank_ht));
this.swiperPanel.style.webkitTransform = 'translateY(' + -y2 + 'px)';
}
};
/** [touchStartBlock description]面板滑动事件 */
zScroll.prototype.touchStartPanel = function(e) {
var touch = e.touches[0];
this.startPanelY = touch.pageY;
e.preventDefault();
};
zScroll.prototype.touchMovePanel = function(e) {
var touch = e.touches[0],
shank_ht = this.shank.offsetHeight,
panel_ht = this.swiperPanel.offsetHeight;
this.panelY = parseInt(this.abovePanelY + touch.pageY - this.startPanelY);
if (this.panelY <= 0 && this.panelY >= -(panel_ht - shank_ht)) {
this.swiperPanel.style.webkitTransform = 'translateY(' + this.panelY + 'px)';
this.moveSwipeBlock();
} else {
if (this.panelY > 0) {
this.panelY = 0;
this.swiperPanel.style.webkitTransform = 'translateY(' + this.panelY + 'px)';
this.moveSwipeBlock();
} else if (this.panelY < -(panel_ht - shank_ht)) {
this.panelY = -(panel_ht - shank_ht);
this.swiperPanel.style.webkitTransform = 'translateY(' + this.panelY + 'px)';
this.moveSwipeBlock();
}
}
e.preventDefault();
};
zScroll.prototype.touchEndPanel = function(e) {
var cssPanel = this.swiperPanel.style.webkitTransform,
cssBlock = this.swiperBlock.style.webkitTransform;
this.aboveY = cssBlock ? parseInt(cssBlock.split('(')[1].split(')')[0].replace('px', '')) : -this.shank.offsetHeight;
this.abovePanelY = cssPanel ? parseInt(cssPanel.split('(')[1].split(')')[0].replace('px', '')) : 0;
e.preventDefault();
};
/** [moveSwipePanel description]移动内容 */
zScroll.prototype.moveSwipeBlock = function() {
var shank_ht = this.shank.offsetHeight;
var x1 = this.swiperPanel.offsetHeight - shank_ht,
x2 = shank_ht - this.swiperBlock.offsetHeight;
if (x1 != 0) {
var y2 = parseInt(x2 * this.panelY / x1 + shank_ht);
this.swiperBlock.style.webkitTransform = 'translateY(' + -y2 + 'px)';
}
};
// ---- 其他 -------//
/** [addStyle description]添加样式 */
zScroll.prototype.addStyle = function(el, classStyle) {
if (typeof classStyle == 'object' && el) {
for (var name in classStyle) {
el.style[name] = classStyle[name];
}
}
};
</script>
<script>
var scroll=new zScroll({
id:'scroll'
});
</script>
</body>
</html>