Native js is used to encapsulate the webapp sliding effect of inertia sliding and sliding rebound
- 2020-03-30 02:51:26
- OfStack
PC mobile compatibility IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ inertia assist, slide rebound
Facade pattern
window.onload = function() {
var insert = '';
for (var i = 0; i < 80; i++) {
insert += '<div style = "width:100%; text-align:center;"> Sliding test ' + i + '</div>';
}
document.getElementById("moveArea").innerHTML = insert;
var at = new appTouch({
tContain : 'appArea', //Required: sliding area id
tMove : 'moveArea', //Required: move area id
tScroller : 'scroller', //Required: custom scrollbar
tScrollerArea : 'scrollerArea'//Required: scrollbar area
}, onmoveend);
//Top/bottom callback
function onmoveend(m) {
//console.log(m);
}
}
var appTouch = function(config, callback) {
this.touchContain = config.tContain;
this.touchMove = config.tMove;
this.touchScroller = config.tScroller;
this.touchScrollerArea = config.tScrollerArea;
this.callbackfn = callback;
this.move();
}
appTouch.prototype = {
move : function(e) {
var monitor = document.getElementById(this.touchContain), //Listening to the container
target = document.getElementById(this.touchMove), //Moving target
scroller = document.getElementById(this.touchScroller), //Custom scrollbar
scrollerArea = document.getElementById(this.touchScrollerArea), //Scroll bar area
sheight = monitor.offsetHeight / target.offsetHeight * monitor.offsetHeight, //Custom scrollbar The length of the
st = (target.offsetHeight - monitor.offsetHeight) / (monitor.offsetHeight - sheight), //The moving block corresponds to the unit length of the roller
tslow = 4, //Top/bottom minus base
tMove = 0, //The slider reaches the top value
tMoveL = tMove + 140, //Pull down range is allowed to the top
bMove = monitor.offsetHeight - target.offsetHeight, //The slider goes to top
bMoveL = bMove - 140, //Upper slip range is allowed
callbackfn = this.callbackfn, //The callback function
flg = false, //Whether the mark is sliding or not
startY, //Mark the starting position
startTop, //Marks the height value at the start of the slide
move = 0;
//Mobile distance
//Mouse event registration
addEvent(monitor, 'mousedown', moveStart);
addEvent(monitor, 'mousemove', moveIn);
addEvent(monitor, 'mouseup', moveEnd);
addEvent(window, 'mousemove', moveIn);
addEvent(window, 'mouseup', moveEnd);
//Mobile device touch event registration
addEvent(monitor, 'touchstart', moveStart);
addEvent(monitor, 'touchmove', moveIn);
addEvent(monitor, 'touchend', moveEnd);
/**
* appearance / Facade mode packaging
*/
function addEvent(el, type, fn) {
if (el.addEventListener) {
el.addEventListener(type, fn, false);
} else if (el.attachEvent) {
el.attachEvent('on' + type, fn);
} else {
el['on' + type] = fn;
}
}
//Disables the browser default behavior
function stop(e) {
//Opera/Chrome/FF
if (e.preventDefault)
e.preventDefault();
//IE
e.returnValue = false;
}
//End of the packaging
//Inertia slowing parameter
var lastMoveTime = 0;
var lastMoveStart = 0;
var stopInertiaMove = false;
function moveStart(e) {
stop(e);
flg = true;
if (e.touches)
e = e.touches[0];
startY = e.clientY;
startTop = target.style.top || 0;
//Inertial slow
lastMoveStart = startY;
lastMoveTime = new Date().getTime();
stopInertiaMove = true;
scrollerArea.style.visibility = 'visible';
}
function moveIn(e) {
if (flg) {
stop(e);
if (e.touches)
e = e.touches[0];
move = e.clientY - startY + parseInt(startTop);
if (move > tMove) {
(move - tMove) / tslow + tMove > tMoveL ? move = tMoveL : move = (move - tMove) / tslow + tMove
} else if (move < bMove)
(move - bMove) / tslow + bMove < bMoveL ? move = bMoveL : move = (move - bMove) / tslow + bMove;
target.style.top = move + 'px';
scroller.style.top = -move / st + 'px';
//Inertial slow
var nowTime = new Date().getTime();
stopInertiaMove = true;
if (nowTime - lastMoveTime > 300) {
lastMoveTime = nowTime;
lastMoveStart = e.clientY;
}
}
}
function moveEnd(e) {
stop(e);
if (e.touches)
e = e.touches[0];
//Inertial slow
var contentTop = target.style.top.replace('px', '');
var contentY = (parseInt(contentTop) + e.clientY - lastMoveStart);
var nowTime = new Date().getTime();
var v = (e.clientY - lastMoveStart) / (nowTime - lastMoveTime);
//Last period of time finger speed
stopInertiaMove = false;
(function(v, startTime, contentY) {
var dir = v > 0 ? -1 : 1;
//Direction of acceleration
var deceleration = dir * 0.005;
function inertiaMove() {
if (stopInertiaMove)
return;
var nowTime = new Date().getTime();
var t = nowTime - startTime;
var nowV = v + t * deceleration;
var moveY = (v + nowV) / 2 * t;
//The change in velocity means that the velocity has reached zero
if (dir * nowV > 0) {
if (move > tMove) {
callbackfn(' To the top ');
target.style.top = tMove + 'px';
scroller.style.top = tMove + 'px';
} else if (move < bMove) {
callbackfn(' Whether the ');
target.style.top = bMove + 'px';
scroller.style.top = -bMove / st + 'px';
}
setTimeout(function() {
if (!stopInertiaMove)
scrollerArea.style.visibility = 'hidden';
}, 4000);
return;
}
move = contentY + moveY;
if (move > tMove) {
t /= 20;
move = (move - tMove) / 10 + tMove;
} else if (move < bMove) {
t /= 20;
move = (move - bMove) / 10 + bMove;
}
target.style.top = move + "px";
scroller.style.top = -move / st + 'px';
setTimeout(inertiaMove, 10);
}
inertiaMove();
})(v, nowTime, contentY);
move = 0;
flg = false;
}
//End of the operation
//The scroll bar length is initialized
scroller.style.height = sheight + 'px';
//End of initialization
},
otherInteract : function() {
//Other function extensions
}
}
IE hack CSS
body,html {background-color:#333; margin: 0; height: 100%; line-height: 2.0; font-family: 'Microsoft YaHei'; overflow-y:hidden;}
#contain{margin: 0 auto; position:relative; width: 100%; max-width: 480px; _width: 480px; height: 100%; cursor: pointer !important;}
#appArea{position: absolute; width: 100%; height: 100%; overflow: hidden; background-color: #fff;}
#topInfo{position: absolute;top: 60px;width: 100%; height:60px; text-align: center; font-size: 18px; }
#bottomInfo{position: absolute;bottom: 0;width: 100%;}
#scrollerArea{position: absolute; right: 0; width: 1.5%; height: 100%;visibility: hidden;}
#scroller{position: absolute; top:0; width: 100%; background-color: #aaa;}
#moveArea{position: absolute; top:0px; width: 100%; background-color: #ddd;}
The HTML code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<link type="text/css" href="css/main.css" rel="stylesheet">
<title> Slide the springback </title>
<!--[if lt IE 9]> <![endif]-->
<noscript></noscript>
</head>
<body>
<div id="contain">
<div id="appArea">
<div id="topInfo">
logo or animate
</div>
<div id="bottomInfo">
some imformation 2014-4-28
</div>
<div id="moveArea"></div>
<div id="scrollerArea">
<div id="scroller"></div>
</div>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>