本文共 5535 字,大约阅读时间需要 18 分钟。
首先是演示:(视频里我没有反应过来上下反着的)
知乎视频www.zhihu.com基本操作为(上下划动小翻页,左右划动大翻页,左右边栏触碰即翻页,同时屏蔽普通的页内划动)
如何导入插件可以看这里:
https://jingyan.baidu.com/article/5d6edee234cabcd8ebdeec06.htmljingyan.baidu.com原始脚本(不建议直接导入Via或者其他支持用户脚本的浏览器页面,可以导入的版本在下面):
//适配300 DPI下的墨案Inkpad X Via浏览器翻页脚本//此DPI下浏览器分辨率为906x1208//如果DPI不一致请修改下面的变量// version:0.1.0// Date:2020-7-10window.addEventListener('load', function(){ //配置区 var smallScrollGap = 300, //小翻页的间隔(上划下划) bigScrollGap = 1150, //大翻页的间隔(左划右划) edgeAreaSize = 0.05, //侧边检测区域的大小 threshold = 80, //最小的动作触发检测间隔 restraint = 100, // 最大的跨坐标轴位移(比如当前是横向手势,其在滑动中产生的纵向位移) allowedTime = 400, // 一次操作最大的触发时间(ms) upDownState = -1, //1或-1,该选项影响是手指方向滚屏还是逆手指方向滚屏(纵向) leftRightState = 1, //1或-1,该选项影响是翻书方向滚屏还是逆翻书方向滚屏(横向,该选项也会影响左右两侧的触碰区域) debugMode = 0; //调试模式开关,影响调试输出 //配置结束,进入逻辑 //处理滑动逻辑 var el = document.querySelector("html"); if(el){ swipedetect(el, function (swipedir) { if(debugMode ==1){ console.log("scrool to " + swipedir); } // swipedir = {"none", "left", "right", "up", "down"} if (swipedir == "left") { window.scrollBy(0, leftRightState * bigScrollGap); } else if (swipedir == "right") { window.scrollBy(0, -leftRightState * bigScrollGap); } else if (swipedir == "up") { window.scrollBy(0, upDownState * smallScrollGap); } else if (swipedir == "down") { window.scrollBy(0, -upDownState * smallScrollGap); } }); } //获取页宽和页高 function getWidth() { return Math.max( // document.body.scrollWidth, // document.documentElement.scrollWidth, // document.body.offsetWidth, // document.documentElement.offsetWidth, // document.documentElement.clientWidth screen.availWidth ); } function getHeight() { //页高,下一个版本做边栏上下区域不同功能用得到 return Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight ); } //滑动方向检测 function swipedetect(el, callback) { var touchsurface = document.querySelector("html"),//找寻HTML节点注入事件 swipedir, startX, startY, distX, distY, elapsedTime, startTime, handleswipe = callback || function (swipedir) {}; touchsurface.addEventListener( "touchstart", function (e) { var touchobj = e.changedTouches[0]; swipedir = "none"; var dist = 0; startX = touchobj.pageX; startY = touchobj.pageY; //这里采用屏幕坐标进行边界特判 console.log("screen Pos x,y:"+touchobj.screenX+','+touchobj.screenY); // 左右侧单击特判 var PageX_MAX = touchobj.screenX; if(getWidth() - PageX_MAX < edgeAreaSize * getWidth()) { swipedir = "down"; } else if(PageX_MAX < edgeAreaSize * getWidth()) { swipedir = "up"; } startTime = new Date().getTime(); // 记录动作开始时间 //e.preventDefault(); }, { passive: false } ); touchsurface.addEventListener( "touchmove", function (e) { e.preventDefault(); // 阻止元素滑动 }, { passive: false } ); touchsurface.addEventListener( "touchend", function (e) { var touchobj = e.changedTouches[0]; distX = touchobj.pageX - startX; //获取横纵坐标的位移向量 distY = touchobj.pageY - startY; elapsedTime = new Date().getTime() - startTime; // 获得总动作时长 if (elapsedTime <= allowedTime) { //判断动作是否超时 if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) { //计算位移 swipedir = distX < 0 ? "left" : "right"; // 如果 distX 是个负值,那么是移动是自右向左(坐标轴正半轴到负半轴),反之亦然 } else if ( Math.abs(distY) >= threshold && Math.abs(distX) <= restraint ) { // 纵向检测 swipedir = distY < 0 ? "up" : "down"; // 如果 distY 是个负值,那么是移动是自上向下(坐标轴正半轴到负半轴),已经说过了 } } handleswipe(swipedir); //e.preventDefault(); }, { passive: false } ); } }, false) //脚本结束
压缩后的脚本(可以导入支持脚本的浏览器)
window.addEventListener("load",function(){ var e,o,a,c,t,s,r,n,d;function i(){ return Math.max(screen.availWidth)}debugMode=0,document.querySelector("html")&&(e=function(e){ 1==debugMode&&console.log("scrool to "+e),"left"==e?window.scrollBy(0,1150):"right"==e?window.scrollBy(0,-1150):"up"==e?window.scrollBy(0,-300):"down"==e&&window.scrollBy(0,300)},n=document.querySelector("html"),d=e||function(e){},n.addEventListener("touchstart",function(e){ var n=e.changedTouches[0];o="none";a=n.pageX,c=n.pageY,console.log("screen Pos x,y:"+n.screenX+","+n.screenY);var t=n.screenX;i()-t<.05*i()?o="down":t<.05*i()&&(o="up"),r=(new Date).getTime()},{ passive:!1}),n.addEventListener("touchmove",function(e){ e.preventDefault()},{ passive:!1}),n.addEventListener("touchend",function(e){ var n=e.changedTouches[0];t=n.pageX-a,s=n.pageY-c,(new Date).getTime()-r<=400&&(80<=Math.abs(t)&&Math.abs(s)<=100?o=t<0?"left":"right":80<=Math.abs(s)&&Math.abs(t)<=100&&(o=s<0?"up":"down")),d(o)},{ passive:!1}))},!1);
如果对我提供的脚本效果不满意,可以自行修改配置区块然后生成新的压缩脚本
将修改后的代码粘贴在 https://jscompress.com/ 中,随后单击下方'Compass JavaScript',将压缩后的脚本导入即可。
可能会写一个系列
By: Morxi
转载地址:http://dljdv.baihongyu.com/