第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

JavaScript 在最后一個(gè) div 停止水平滾動(dòng)

JavaScript 在最后一個(gè) div 停止水平滾動(dòng)

紫衣仙女 2022-06-09 17:18:36
我正在嘗試創(chuàng)建一個(gè)類似輪播的對(duì)象，您可以在其中單擊左右以僅使用 HTML、CSS 和 JavaScript 在上一個(gè)和下一個(gè)圖像之間查看。這是代碼：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>我遇到的唯一問(wèn)題是您可以滾動(dòng)到最終的 div 顏色塊之外。是否有可能讓您無(wú)法滾動(dòng)超過(guò)第一個(gè)和最后一個(gè) div？CodePen https://codepen.io/laurentkosc1990/pen/eYNXaxG
查看完整描述

2 回答

?
SMILET

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊

有很多方法可以解決這個(gè)問(wèn)題。在此示例中，我定義了一個(gè)最大值和最小值，您可以對(duì)其進(jìn)行轉(zhuǎn)換和檢查以停止輪播。這可以是固定值，也可以是動(dòng)態(tài)的，讓您可以自由添加和刪除內(nèi)部模塊。


靜止的


let minX = -400

let maxX = 0

動(dòng)態(tài)的


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


查看完整回答
反對(duì) 回復(fù) 2022-06-09
?
慕運(yùn)維8079593

TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超5個(gè)贊

也許這對(duì)你有用


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>


查看完整回答
反對(duì) 回復(fù) 2022-06-09
  • 2 回答
  • 0 關(guān)注
  • 152 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)