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 = -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>