DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>pickertitle>
<style type="text/css">
* {margin: 0;padding: 0;}
.picker {position: fixed;bottom: 0;left: 0;box-shadow: 0 0 10px 2px #eee;right: 0;height: 250px;
overflow: hidden;border: 20px solid #fff;border-left: 0;border-right: 0;}
.picker-box {transform: translate3d(0, 0, 0);position: absolute;top: 100px;left: 0;right: 0;height: auto;}
.picker-box > div {height: 50px;line-height: 50px;text-align: center;}
.picker-indicator {width: 100%;height: 50px;position: absolute;top: 50%;left: 0;
transform: translateY(-50%);}
.picker-indicator::before {content: '';position: absolute;top: 0;left: 50%;width: 90%;height: 1px;
background-color: #ccc;transform: scaleY(0.5) translateX(-50%);}
.picker-indicator::after {content: '';position: absolute;bottom: 0;left: 50%;width: 90%;height: 1px;
background-color: #ccc;transform: scaleY(0.5) translateX(-50%);}
.picker-mask {position: absolute;top: 50%;left: 0;right: 0;height: 250px;
transform: translateY(-50%);background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)),
linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, .6));
background-repeat: no-repeat;background-position: top, bottom;background-size: 100% 100px;z-index: 3;}
style>
head>
<body>
<div id="app">
<div class="picker">
<div class="picker-mask">div>
<div class="picker-indicator">div>
<div class="picker-box">div>
div>
div>
body>
<script type="text/javascript">
window.onload = function() {
const words = ['长城', '故宫', '西湖', '西施', '南瓜', '冬瓜', '西瓜', '西瓜', '西瓜', '西瓜'];
const picker_mask = document.querySelector(".picker-mask");
const picker_box = document.querySelector(".picker-box");
for (let i = 0; i < words.length; i++) {
let divDom = document.createElement('div');
divDom.innerHTML = words[i];
picker_box.appendChild(divDom);
}
const box_div = document.querySelector('.picker-box > div');
const lineHeight = box_div.offsetHeight; //每行的高度
let targetY = 0;
let startY = 0;
let moveY = 0;
picker_mask.addEventListener("touchstart", function(e) {
e = e || window.event;
startY = e.changedTouches[0].clientY;
});
picker_mask.addEventListener("touchmove", function(e) {
e = e || window.event;
moveY = e.changedTouches[0].clientY - startY;
targetY += moveY;
startY = e.changedTouches[0].clientY;
picker_box.style.transform = "translate3d(0, " + targetY + "px, 0)";
});
picker_mask.addEventListener("touchend", function(e) {
e = e || window.event;
picker_box.style.transition = 'transform .3s ease';
if (targetY >= 0) {
targetY = 0;
} else if (targetY <= -(words.length - 1) * lineHeight) {
targetY = -(words.length - 1) * lineHeight;
} else {
targetY = myRound(targetY, lineHeight) * lineHeight;
}
picker_box.style.transform = "translate3d(0, " + targetY + "px, 0)";
picker_box.addEventListener('transitionend', removeTrans);
});
function removeTrans() {
picker_box.style.transition = '';
picker_box.removeEventListener('transitionend', removeTrans);
}
function myRound(x, y) {
x = -x;
const ret = x / y - parseInt(x / y);
if (ret > 0.3) {
return -(parseInt(x / y) + 1);
} else {
return -parseInt(x / y);
}
}
}
script>
html>