移动端实现滑屏和添加自定义滚动条（也可以不加）的封装函数

朴灿烈づ我的快乐病毒、 2022-05-23 06:07 132阅读 0赞

把昨天的实例用到的函数封装了一下，方便以后用在其他的地方（功能会不断完善，持续更新中……）

更新于：2018/6/6  更新的内容为：添加了几个可选函数（start、move、end、over），其中start是手指按下时，执行的函数，move是手指移动时，执行的函数，end是手指抬起时执行的函数，over是滚动结束后执行的函数

使用方法如下小实例所示：

window.onload = function(){
    	createList();
    	var wrap = document.querySelector('#wrap');
    	
    mScroll({
                    el:box,
                    start:function(e){
                        console.log("手指按下要执行的函数");
                    },
                    move:function(e){
                        console.log("发生滚动的时候，执行的函数")
                    },
                    end:function(e){
                        console.log("手指抬起要执行的函数");
                    },
                    over:function(){
                        console.log("滚动结束");
                    }
                });
    };

mScroll(init);

参数说明：init：对象，里面可以有两个属性。

el:是必须的，就是想要实现滑屏时，移动的主体部分

offBar：是是否添加滚动条，如果不添加的话就加这个属性，属性值为true，如果不写这个属性或者这个属性的值为false时，就表示加滚动条

start、move、end、over，作用上面已经说过了，记得都是函数类型

看下面的封装代码：

function mScroll(init){
    	if(!init.el){
    		return;
    	}
    	var wrap = init.el;
    	var inner = init.el.children[0];
    	var scrollBar = document.createElement("div");	
    	var startPoint = 0;
    	var startEl = 0;
    	var lastY = 0;
    	var lastDis = 0;
    	var lastTime = 0;
    	var lastTimeDis = 0;
    	var back = document.documentElement.clientWidth/8;
    	var maxTranslate = wrap.clientHeight - inner.offsetHeight;
    	scrollBar.id = "scrollBar";
    	if(!init.offBar){
    		var scale = wrap.clientHeight/inner.offsetHeight;
    		inner.style.minHeight = "100%";
    		scrollBar.style.cssText = "width:4px;background:rgba(0,0,0,.5);position:absolute;right:0;top:0;border-radius:2px;opacity:0;transition:.3s opacity;";
    		wrap.appendChild(scrollBar);
    	}
    	css(inner,"translateZ",0.01);
    	inner.addEventListener('touchstart', function(e) {
    		maxTranslate = wrap.clientHeight - inner.offsetHeight;
    		if(!init.offBar){
    			if(maxTranslate >= 0) {
    				scrollBar.style.display = "none";
    			} else {
    				scrollBar.style.display = "block";
    			}
    			scale = wrap.clientHeight/inner.offsetHeight;
    			scrollBar.style.height = wrap.clientHeight * scale + "px";
    		}
    		clearInterval(inner.timer);
    		startPoint = e.changedTouches[0].pageY;
    		startEl = css(inner,"translateY");
    		lastY = startEl;
    		lastTime = new Date().getTime();
    		lastTimeDis = lastDis = 0;
    		(init.offBar)||(scrollBar.style.opacity = 1);
    		init.start&&init.start.call(box,e);
    	});
    	inner.addEventListener('touchmove', function(e) {
    		var nowTime = new Date().getTime();
    		var nowPoint = e.changedTouches[0].pageY;
    		var dis = nowPoint - startPoint;
    		var translateY = startEl + dis;
    		if(translateY > back){
    			translateY = back
    		} else if(translateY < maxTranslate -back){
    			translateY = maxTranslate - back;
    		}
    		css(inner,"translateY",translateY);
    		(init.offBar)||css(scrollBar,"translateY",-translateY*scale);
    		lastDis = translateY - lastY;
    		lastY = translateY;
    		lastTimeDis = nowTime - lastTime;
    		lastTime = nowTime;
    		init.move&&init.move.call(box,e);
    	});
    	inner.addEventListener('touchend', function(e) {
    		var type = "easeOut";
    		var speed = Math.round(lastDis / lastTimeDis*10);
    		speed = lastTimeDis <= 0?0 :speed;
    		var target = Math.round(speed*30 + css(inner,"translateY"));
    		if(target > 0){
    			target = 0;
    			type = "backOut";
    		} else if(target < maxTranslate){
    			target = maxTranslate;
    			type = "backOut";
    		}
    		MTween({
    			el:inner,
    			target: {translateY:target},
    			time: Math.round(Math.abs(target - css(inner,"translateY"))*1.8),
    			type: type,
    			callBack: function(){
    				(init.offBar) || (scrollBar.style.opacity = 0);
    				init.over&&init.over.call(box,e);
    			},
    			callIn: function(){
    				var translateY = css(inner,"translateY");
    				init.offBar||css(scrollBar,"translateY",-translateY*scale);
    				init.move&&init.move.call(box,e);
    			}
    		});
    		init.end&&init.end.call(box,e);
    	});
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，132人围观）

还没有评论，来说两句吧...

相关阅读

相关自定义滚动条的样式

*核心代码： ** /* 设置滚动条整体部分的样式 */ ::-webkit-scrollbar { /* ...

墨蓝/ 2024年04月18日 17:25/ 0 赞/ 72 阅读

相关移动端相册集实例（包括滑屏，自定义滚动条，上拉加载，大图预览）

大致功能描述： 1、滑屏，添加自定义滚动条 2、上拉加载 3、大图预览图片预览（左边是为加载中的相册集，中间一个是加载完成的相册，一个是当我们拉到底部的时候会有加载更

本是古典何须时尚/ 2022年05月23日 12:27/ 0 赞/ 136 阅读

相关 js自定义滚动条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

蔚落/ 2022年05月23日 12:16/ 0 赞/ 290 阅读

相关移动端实现滑屏和添加自定义滚动条（也可以不加）的封装函数

把昨天的实例用到的函数封装了一下，方便以后用在其他的地方（功能会不断完善，持续更新中……）更新于：2018/6/6 更新的内容为：添加了几个可选函数（start、move

朴灿烈づ我的快乐病毒、/ 2022年05月23日 06:07/ 0 赞/ 133 阅读

相关移动端利用translate来添加滑屏效果，并且添加自定义滚动条

移动端会有默认事件，比如滚动条、长按菜单、选中文字等等，很多是我们不想要的，所以，我们做的时候，一般会阻止默认事件，然后自然就把所有的默认事件阻止了，包括滚动条，那么此时我们就

朱雀/ 2022年05月23日 05:19/ 0 赞/ 394 阅读

相关在移动端显示滚动条

在移动端，滚动条会自动隐藏，如果想显示要怎么办呢？ .left\{ width: pxTorem(170px); overflow: hidden; overflow-

水深无声/ 2022年05月14日 05:41/ 0 赞/ 376 阅读

相关 Vue封装滚动条组件(可自定义滚动滚动条速率、颜色等)

<template> <div class="v-scroll-bar" @wheel.pre

不念不忘少年蓝@/ 2022年05月13日 12:16/ 0 赞/ 871 阅读

相关原生JS实现自定义滚动条

浏览器带给我们的滚动条 .test{ width: 300px; height: 100px;

约定不等于承诺〃/ 2022年02月27日 02:26/ 0 赞/ 420 阅读

相关自定义滚动条

![875134-20190720145757838-1748771409.png][] .el-container2 { height: cal

女爷i/ 2021年10月30日 01:26/ 0 赞/ 458 阅读

相关 uniapp实现自定义滚动条。

uniapp实现自定义滚动条。笔记重点：需要给每个text绑定一个id,但是id不能是数字开头，所以在前面加一个s或者其他字母。然后scroll-into-view定位到

曾经终败给现在/ 2021年07月26日 01:23/ 0 赞/ 1183 阅读