@egjs/conveyer
Version:
Conveyer adds Drag gestures to your Native Scroll.
122 lines (111 loc) • 2.69 kB
HTML
<style>
body {
background: #F0F3FB;
margin-left: 0;
margin-right: 0;
}
.items {
position: relative;
overflow: scroll;
width: 100%;
white-space: nowrap;
overscroll-behavior: none;
user-select: none;
height: 400px;
border: 1px solid black;
}
.container {
display: block;
position: relative;
width: 100%;
}
.item {
overflow: hidden;
margin: 18px 12px 30px 0;
width: 271px;
height: 244px;
line-height: 244px;
text-align: center;
font-weight: bold;
font-size: 40px;
border-radius: 3px;
background-color: #fff;
-webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 4%), 0 0 2px 0 rgb(0 0 0 / 15%);
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 4%), 0 0 2px 0 rgb(0 0 0 / 15%);
}
#prev,
#next {
position: absolute;
top: 0;
z-index: 10;
}
#prev {
left: 100px;
}
#next {
right: 100px;
}
</style>
<body>
<button id="prev">PREV</button>
<button id="next">NEXT</button>
<div class="items">
<!-- <div class="container"> -->
<div class="item"><a href="#1">1</a></div>
<div class="item"><a href="#2">2</a></div>
<div class="item"><a href="#3">3</a></div>
<div class="item"><a href="#4">4</a></div>
<div class="item"><a href="#5">5</a></div>
<div class="item"><a href="#6">6</a></div>
<div class="item"><a href="#7">7</a></div>
<div class="item"><a href="#8">8</a></div>
<div class="item"><a href="#9">9</a></div>
<div class="item"><a href="#10">10</a></div>
<div class="item"><a href="#11">11</a></div>
<div class="item"><a href="#12">12</a></div>
<!-- </div> -->
</div>
</body>
<script src="../../dist/conveyer.js"></script>
<script>
const conveyer = new Conveyer(".items", {
preventClickOnDrag: true,
useSideWheel: true,
horizontal: false,
});
conveyer.on("reachStart", () => {
prev.disabled = true;
});
conveyer.on("leaveStart", () => {
prev.disabled = false;
});
conveyer.on("reachEnd", () => {
next.disabled = true;
});
conveyer.on("leaveEnd", () => {
next.disabled = false;
});
next.addEventListener("click", () => {
// end to start
conveyer.scrollIntoView("next", {
align: "start",
duration: 500,
});
});
prev.addEventListener("click", () => {
// start to end
conveyer.scrollIntoView("prev", {
align: "end",
duration: 500,
});
});
conveyer.init();
document.querySelectorAll(".item").forEach(el => {
el.addEventListener("click", () => {
conveyer.scrollIntoView(el, {
align: "center",
duration: 500,
});
});
});
</script>