JavaScript在最后一个div处停止水平滚动

Question

嗨，我正在尝试创建一个类似旋转木马的对象，在该对象中，您可以仅使用HTML、CSS和JavaScript左右单击以查看上一个和下一个图像。这是代码：

const container = document.querySelector(".container");
const lefty = document.querySelector(".lefty");
let translate = 0;
lefty.addEventListener("click", function() {
translate += 200;
container.style.transform = "translateX(" + translate + "px" + ")";
});
const righty = document.querySelector(".righty");
righty.addEventListener("click", function() {
translate -= 200;
container.style.transform = "translateX(" + translate + "px" + ")";
});

.outer {
overflow-x: hidden;
overflow-y: hidden;
}
.container {
display: flex;
transition: transform .4s ease-in;
}
.inner {
flex: 0 0 25%;
height: 100px;
margin: 10px;
}
.paddle {
position: absolute;
top: 50px;
bottom: 0;
width: 30px;
height: 20px;
}
.lefty {
left: 0;
z-index: 1;
}
.righty {
right: 0;
z-index: 1;
}

<button class="lefty paddle" id="left-button"></button>
<div class="outer" id="content">
<div class="container">
<div class="inner" style="background:red"></div>
<div class="inner" style="background:green"></div>
<div class="inner" style="background:blue"></div>
<div class="inner" style="background:yellow"></div>
<div class="inner" style="background:orange"></div>
</div>
</div>
<button class="righty paddle" id="right-button"></button>

我遇到的唯一问题是，您可以滚动到最后的div颜色块。有没有可能让您无法滚动通过第一个和最后一个div？

CodePenhttps://codepen.io/laurentkosc1990/pen/eYNXaxG

Answer 1

有很多方法可以解决这个问题。在这个例子中，我定义了一个最大值和最小值，您可以对其进行转换并检查以停止旋转木马。这可以是固定值，也可以是动态值，让您可以自由添加和删除内部模块。

静态

let minX = -400
let maxX = 0

动态

//number of inner classes times length, negate the visible classes 
let minX = (inn.length * -200) + 600

const container = document.querySelector(".container");
const inn = document.getElementsByClassName('inner');
const lefty = document.querySelector(".lefty");
let translate = 0;
//let minX = -400
//number of inner classes times length, negate the visible classes 
let minX = (inn.length * -200) + 600
let maxX = 0
lefty.addEventListener("click", function() {
if(translate >= maxX){
return;
}
translate += 200;
container.style.transform = "translateX(" + translate + "px" + ")";
});
const righty = document.querySelector(".righty");
righty.addEventListener("click", function() {
if(translate <= minX){
return;
}
translate -= 200;
container.style.transform = "translateX(" + translate + "px" + ")";
});

.outer {
overflow-x: hidden;
overflow-y: hidden;
}
.container {
display: flex;
transition: transform .4s ease-in;
}
.inner {
flex: 0 0 25%;
height: 100px;
margin:10px;
}
.paddle {
position: absolute;
top: 50px;
bottom: 0;
width: 30px;
height:20px;
}
.lefty {
left: 0;
z-index:1;
}
.righty{
right: 0;
z-index:1;
}

<button class="lefty paddle" id="left-button"></button>
<div class="outer" id="content">
<div class="container">
<div class="inner" style="background:red"></div>
<div class="inner" style="background:green"></div>
<div class="inner" style="background:blue"></div>
<div class="inner" style="background:yellow"></div>
<div class="inner" style="background:orange"></div>
</div>
</div>
<button class="righty paddle" id="right-button"></button>

Answer 2

也许这对你的有用

const container = document.querySelector(".container");
const visibleWidth = container.offsetWidth; // visible width of container
const fullWidth = container.scrollWidth; //width of container incliding hidden part
const innerDivWidth = document.querySelector(".inner").offsetWidth+20;// margin 10px from both sides
const lefty = document.querySelector(".lefty");
let translate = 0;
lefty.addEventListener("click", function() {
if(translate<0){
translate += innerDivWidth;
container.style.transform = "translateX(" + translate + "px" + ")";
}
});
const righty = document.querySelector(".righty");
righty.addEventListener("click", function() {

//here is my calculation, look carefully, you will get it
if((translate + fullWidth) > visibleWidth){
translate -= innerDivWidth;
container.style.transform = "translateX(" + translate + "px" + ")";
}
});
// btw translation rate should be according to inner div's width 
// otherwise last div will not show properly

.outer {
overflow-x: hidden;
overflow-y: hidden;
}
.container {
display: flex;
transition: transform .4s ease-in;
}
.inner {
flex: 0 0 25%;
height: 100px;
margin: 10px;
}
.paddle {
position: absolute;
top: 50px;
bottom: 0;
width: 30px;
height: 20px;
}
.lefty {
left: 0;
z-index: 1;
}
.righty {
right: 0;
z-index: 1;
}

<button class="lefty paddle" id="left-button"></button>
<div class="outer" id="content">
<div class="container">
<div class="inner" style="background:red"></div>
<div class="inner" style="background:green"></div>
<div class="inner" style="background:blue"></div>
<div class="inner" style="background:yellow"></div>
<div class="inner" style="background:orange"></div>
</div>
</div>
<button class="righty paddle" id="right-button"></button>