标签：scroller top height html querySelector 滑动 document 100% 图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* You can remove this page div in your website */
* {
margin: 0;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.wrapper {
width: 100%;
height: 100%;
/* height: 600px;
max-height: 100vh; */
position: absolute;
overflow: hidden;
}
.bottom,
.top {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
overflow: hidden;
}
.scroller {
width: 50px;
height: 50px;
position: absolute;
left: 100px;
top: 50%;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
}
.scroller-top {
margin-top: -25px;
}
.scroller__thumb {
width: 100%;
height: 100%;
border-radius: 50%;
padding: 7px;
}
.scroller:before,
.scroller:after {
content: " ";
display: block;
width: 7px;
height: 9999px;
position: absolute;
left: 50%;
margin-left: -3.5px;
}
.scroller:before {
top: 49px;
}
.scroller:after {
bottom: 49px;
}
.scroller-top>.scroller__thumb {
border: 5px solid #FFAB91;
}
.scroller-top:before,
.scroller-top:after {
background: #FFAB91;
}
.imgcommon {
width: 100%;
height: 100%;
}
</style>
<script>
let active = false;
function scrollIt(x) {
let transform = Math.max(0, (Math.min(x, document.querySelector('.wrapper').offsetWidth)));
// document.querySelector('.top').style.width = transform + "px";
document.querySelector('.top').style.clipPath = `polygon(0% 0, ${ transform + "px"} 0, ${ transform + "px"} 100%, 0 100%)`;
document.querySelector('.scroller-top').style.left = transform - 25 + "px";
}
function releaseMouse(){
active = false;
}
function captureMouse(){
active = true;
}
window.onload=function(){
// We'll have to do the same for our top scroller
document.querySelector('.scroller-top').addEventListener('mousedown', captureMouse);
document.body.addEventListener('mouseup', releaseMouse);
document.body.addEventListener('mouseleave', releaseMouse);
document.body.addEventListener('touchend', releaseMouse);
document.body.addEventListener('touchcancel', releaseMouse);
// Let's figure out where their mouse is at
document.body.addEventListener('mousemove', function(e) {
if (!active) return;
// Their mouse is here...
let x = e.pageX;
// but we want it relative to our wrapper
x -= document.querySelector('.wrapper').getBoundingClientRect().left;
// Okay let's change our state
scrollIt(x);
});
document.querySelector('.scroller-top').addEventListener('touchstart', captureMouse, { passive: true });
document.querySelector('.wrapper').addEventListener('touchmove', function(e) {
if (!active) return;
e.preventDefault();
let x = e.touches[0].pageX;
x -= document.querySelector('.wrapper').getBoundingClientRect().left;
scrollIt(x);
}, { passive: true });
scrollIt(460);
active = false;
};
</script>
</head>
<body>
<div class="wrapper">
<div class="bottom">
<img src="./a.jpg" draggable="false" class="imgcommon" />
</div>
<div class="top">
<img src="./test.png" draggable="false" class="imgcommon"/>
</div>
<div class="scroller scroller-top">
<svg class="scroller__thumb" xmlns="https://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" >
<polygon points="0 50 37 68 37 32 0 50" style="fill:#FFAB91" />
<polygon points="100 50 64 32 64 68 100 50" style="fill:#FFAB91" />
</svg>
</div>
</div>
</body>
</html>
标签：scroller,
top,
height,
html,
querySelector,
滑动,
document,
100%,
图片
From： https://www.cnblogs.com/ives/p/17850324.html