<!--
Requirement: Slide up and down, display 5 small values in a large div block, and automatically obtain the value in the middle during the sliding process
have to be aware of is:
1 touchmove will be triggered multiple times;
2 The value of the middle position can be obtained by positioning the top value
3 Take 1 to 99 as an example, when sliding up and down, you must pay attention to the middle value if you take the middle value, the first and last must be cut to the middle position;
When the page is displayed as 93 94 95 96 97, when sliding up, assuming that the distance of divHeight*5 is sliding,
In this way, the last page display will only exist 98 99 , and it will be empty when the intermediate value is taken;
When it is also displayed as 3, 4, 5, 6, 7, when sliding down, assuming that the distance of divHeight*5 is slid,
In this way, the last page display will only exist 98 99 , and it will be empty when the intermediate value is taken;
But it should be noted that the minimum and maximum values must appear in the middle
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no, email=no" />
<title>Document</title>
<style>
#id {
width: 200px;
height: 150px;
background: red;
position: fixed;
left: 34%;
top:0px;
overflow:hidden;
}
.box{
width:100%;
height:100%;
}
.age-item{
width: 30px;
height: 30px;
background: green;
border: solid 1px grey;
position:absolute;
/*top:0;*/
}
.box .age-option-select{
font-size: 16px;
color: #ffffff;
background-color: #0000ff;
}
</style>
<script>
function cons(idx){
console.log(idx)
}
function load() {
/*Single finger drag*/
var itemHeight = 30; //height of each item option
var obj = document.querySelector('.box');
var html2 = '';
for(var i=1;i<100;i++){
html2+='<div class="age-item" onclick="cons('+i+')" style="top:'+(i-1)*itemHeight+'px">'+i+'</div>'
}
obj.innerHTML = html2;
var touchStart = 0;
var touchEnd =0;
var ageOption = document.getElementsByClassName('age-item');
changeSelectStyle(ageOption);
obj.addEventListener("touchstart", function(event) {
var touch = event.targetTouches[0];
touchStart = touch.pageY;
obj.addEventListener('touchmove', function(event) {
// if there is only one finger in the position of this element
if (event.targetTouches.length == 1) {
event.preventDefault(); // prevent browser default events
var touch = event.targetTouches[0];
touchEnd = touch.pageY;
}
}, false);
});
obj.addEventListener("touchend", function() {
var ages = document.getElementsByClassName('age-item');
if(touchEnd-touchStart>0){ //Slide down
var ageItem = 0;
for(let j=0;j<ages.length;j++){
if(ages[j].style.top == '0px'|| ages[j].style.top == 0){
ageItem = ages[j].innerHTML;
break;
}
}
if(parseInt(ages[0].style.top)>=2*itemHeight){
return;
}else{
if(parseInt(ageItem)+1 < Math.ceil((touchEnd-touchStart)/itemHeight)){
var diff = parseInt(ageItem)+1;
changeTop(ages,diff);
}else{
var diff = Math.ceil((touchEnd-touchStart)/itemHeight);
changeTop(ages,diff);
}
}
} else {// improve slip
var ageItem = 0;
for(let k=ages.length-1;k>0;k--){
if(ages[k].style.top == 4*itemHeight +'px'){
ageItem = ages[k].innerHTML;
break;
}
}
if(parseInt(ages[ages.length-1].style.top)<=2*itemHeight){
return;
}else{
if(ageItem==''){
var diff = -1;
changeTop(ages,diff);
}else if((99-parseInt(ageItem))+2<Math.ceil(Math.abs(touchEnd-touchStart)/itemHeight)){
var diff = parseInt(ageItem)-99-2;
changeTop(ages,diff);
}else{
var diff = Math.ceil((touchEnd-touchStart)/itemHeight);
changeTop(ages,diff);
}
}
}
// Since the above style needs to be modified 99 times, it needs to be redrawn 99 times; it can be modified to re-insert once, which is not listed in detail here
delEvent(obj,'touchstart');
delEvent(obj,'touchmove');
});
function delEvent(obj,evt,fn,useCapture){
if (obj.removeEventListener) {
//First use the W3C method to remove the event handler
obj.removeEventListener(evt,fn,!!useCapture);
}else {
if(obj.__EventHandles){
var fns = obj .__ EventHandles [evt];
if(fns){delete fns[fn.__EventID];}
}
}
}
function changeTop(obj,diff){
for(let k=0;k<obj.length;k++){
obj[k].style.top = parseInt(obj[k].style.top) + diff*itemHeight +'px';
}
changeSelectStyle(ageOption);
}
function changeSelectStyle(arr){
for(var i=0 ; i < arr.length ; i++){
if(hasClass('age-option-select',arr[i])){
removeClass('age-option-select',arr[i])
}
if(arr[i].style.top!=undefined && arr[i].style.top == 2*itemHeight+'px'){
if(!hasClass('age-option-select',arr[i])){
addClass('age-option-select',arr[i])
}
}
}
}
}
// public method
function hasClass(cla, element) {
if(element.className.trim().length === 0) return false;
var allClass = element.className.trim().split(" ");
return allClass.indexOf(cla) > -1;
}
function addClass(cla,element){
if(!hasClass(cla,element)){
if(element.setAttribute){
element.setAttribute("class",element.getAttribute("class")+" "+cla);
}else{
element.className = element.className+" "+cla;
}
}
}
function removeClass(cla,element){
if(hasClass(cla,element)){
var allClass = element.className.trim().split(" ");
allClass.splice(allClass.indexOf(cla),1);
element.className = allClass.join(' ');
}
}
</script>
</head>
<body onload="load()">
<div id="inp"></div>
<div id="id" style="top:0px;">
<div class="box" style="top:0px;">
</div>
</div>
</body>
</html>