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？

CodePen https://codepen.io/laurentkosc1990/pen/eYNXaxG

Answer 1

有很多方法可以解决这个问题。在此示例中，我定义了一个最大值和最小值，您可以对其进行转换和检查以停止轮播。这可以是固定值，也可以是动态的，让您可以自由添加和删除内部模块。静止的let minX = -400let maxX = 0动态的//number of inner classes times length, negate the visible classes&nbsp;let minX = (inn.length * -200) + 600const 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&nbsp;let minX = (inn.length * -200) + 600let maxX = 0lefty.addEventListener("click", function() {&nbsp; &nbsp; if(translate >= maxX){&nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; &nbsp; translate += 200;&nbsp; &nbsp; container.style.transform = "translateX(" + translate + "px" + ")";});const righty = document.querySelector(".righty");righty.addEventListener("click", function() {&nbsp; &nbsp; if(translate <= minX){&nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; &nbsp; translate -= 200;&nbsp; &nbsp; container.style.transform = "translateX(" + translate + "px" + ")";});.outer {&nbsp; overflow-x: hidden;&nbsp; &nbsp; overflow-y: hidden;}.container {&nbsp; display: flex;&nbsp; transition: transform .4s ease-in;}.inner {&nbsp; flex: 0 0 25%;&nbsp; height: 100px;&nbsp; &nbsp; margin:10px;}.paddle {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 50px;&nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; width: 30px;&nbsp; &nbsp; height:20px;}.lefty {&nbsp; &nbsp; left: 0;&nbsp; z-index:1;}.righty{&nbsp; &nbsp; right: 0;&nbsp; z-index:1;}<button class="lefty paddle" id="left-button"></button><div class="outer" id="content">&nbsp; <div class="container">&nbsp; &nbsp; <div class="inner" style="background:red"></div>&nbsp; &nbsp; <div class="inner" style="background:green"></div>&nbsp; &nbsp; <div class="inner" style="background:blue"></div>&nbsp; &nbsp; <div class="inner" style="background:yellow"></div>&nbsp; &nbsp; <div class="inner" style="background:orange"></div>&nbsp; </div></div><button class="righty paddle" id="right-button"></button>

Answer 2

也许这对你有用const container = document.querySelector(".container");const visibleWidth = container.offsetWidth; // visible width of containerconst fullWidth = container.scrollWidth; //width of container incliding hidden partconst innerDivWidth = document.querySelector(".inner").offsetWidth+20;// margin 10px from both sidesconst lefty = document.querySelector(".lefty");let translate = 0;lefty.addEventListener("click", function() {&nbsp; if(translate<0){&nbsp; &nbsp; translate += innerDivWidth;&nbsp; &nbsp; container.style.transform = "translateX(" + translate + "px" + ")";&nbsp; }});const righty = document.querySelector(".righty");righty.addEventListener("click", function() {&nbsp;&nbsp;&nbsp; //here is my calculation, look carefully, you will get it&nbsp;if((translate + fullWidth) > visibleWidth){&nbsp; &nbsp;translate -= innerDivWidth;&nbsp; &nbsp;container.style.transform = "translateX(" + translate + "px" + ")";&nbsp; }});// btw translation rate should be according to inner div's width&nbsp;// otherwise last div will not show properly&nbsp;.outer {&nbsp; overflow-x: hidden;&nbsp; overflow-y: hidden;}.container {&nbsp; display: flex;&nbsp; transition: transform .4s ease-in;}.inner {&nbsp; flex: 0 0 25%;&nbsp; height: 100px;&nbsp; margin: 10px;}.paddle {&nbsp; position: absolute;&nbsp; top: 50px;&nbsp; bottom: 0;&nbsp; width: 30px;&nbsp; height: 20px;}.lefty {&nbsp; left: 0;&nbsp; z-index: 1;}.righty {&nbsp; right: 0;&nbsp; z-index: 1;}<button class="lefty paddle" id="left-button"></button><div class="outer" id="content">&nbsp; <div class="container">&nbsp; &nbsp; <div class="inner" style="background:red"></div>&nbsp; &nbsp; <div class="inner" style="background:green"></div>&nbsp; &nbsp; <div class="inner" style="background:blue"></div>&nbsp; &nbsp; <div class="inner" style="background:yellow"></div>&nbsp; &nbsp; <div class="inner" style="background:orange"></div>&nbsp; </div></div><button class="righty paddle" id="right-button"></button>