基本操作为（上下划动小翻页，左右划动大翻页，左右边栏触碰即翻页，同时屏蔽普通的页内划动）
原始脚本（不建议直接导入Via或者其他支持用户脚本的浏览器页面，可以导入的版本在下面）：
//适配300 DPI下的墨案Inkpad X Via浏览器翻页脚本
//此DPI下浏览器分辨率为906x1208
//如果DPI不一致请修改下面的变量
// version:0.1.0
// Date:2020-7-10
window.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'，将压缩后的脚本导入即可。
可能会写一个系列
