0

Eu estou precisando limitar o avanço quando apertar o "botão avança". Do jeito que esta se você ficar apertando o botão vai chegar uma hora que os itens vão sumir da tela. Eu gostaria que isso não acontecesse, que quando o ultimo item aparecesse a animação parasse impedindo que todos os itens saiam da tela, mas estou com problema nesta parte. Basicamente o que tem que acontecer é que se apertar o botão "Avançar" e se já estiver aparecido o ultimo item, ele tem que parar, do jeito que está ele continua avançando até sair da tela.

Ele tem que parar de mover assim que o último item aparecer, de forma que quando chegar no ultimo item, fique parecendo com a imagem abaixo.

inserir a descrição da imagem aqui

var amount = getFirstChild(document.getElementById("scroll1")).clientWidth; //300;
var margin = 16;
var initial = 0;
var scroll_container = document.getElementById("scroll1");


function getFirstChild(el) {
  var firstChild = el.firstChild;
  while (firstChild != null && firstChild.nodeType == 3) { // skip TextNodes
    firstChild = firstChild.nextSibling;
  }
  return firstChild;
}

// Avança
document.getElementById("myBtn2").addEventListener("click", function() {
  initial -= (amount + margin);
  scroll_container.style.transform = "translateX(" + initial + "px)";
})

// Volta
document.getElementById("myBtn1").addEventListener("click", function() {
  if (initial + (amount + margin) >= 0) {
    initial = 0;
    scroll_container.style.transform = "translateX(" + 0 + "px)";
  } else {
    initial += (amount + margin);
    scroll_container.style.transform = "translateX(" + initial + "px)";
  }
})
#container-controls {
  display: inline-flex;
  width: 100%;
}

#title_page {
  width: calc(100% - 170px);
}

#title_page h2 {
  text-align: left;
  padding: 0;
  font-family: 'Optimistic Display Medium', Helvetica, Arial, sans-serif !important;
  font-weight: 500 !important;
  margin: 0;
  color: #344854;
  font-size: 48px;
}

.btn_control {
  background: blue;
  height: 40px;
  width: 80px;
  margin: 5px 5px;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  margin-top: auto;
}

.imagem {
  height: 300px;
  width: 300px;
  margin: 16px 16px 16px 0px;
  display: block;
  background: black;
  position: relative;
}

.wrapper {
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  width: 100%;
}

.scrolls {
  display: flex;
  justify-content: left;
  align-items: flex-start;
  transform: translateX(0px);
  transition: transform 0.5s cubic-bezier(0.25, 0.72, 0.51, 0.96) 0s;
  min-width: unset;
  margin: 10px;
}
<div>
  <div id="container-controls">
    <div id="title_page">
      <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
    </div>
    <div id="myBtn1" class="btn_control"> Retrocede </div>
    <div id="myBtn2" class="btn_control"> Avança </div>
  </div>
  <div class="wrapper">
    <div class="scrolls" id="scroll1">
      <img class="imagem" src="http://placehold.it/50x50" />
      <img class="imagem" src="http://placehold.it/50x50" />
      <img class="imagem" src="http://placehold.it/50x50" />
      <img class="imagem" src="http://placehold.it/50x50" />
      <img class="imagem" src="http://placehold.it/50x50" />
      <img class="imagem" src="http://placehold.it/50x50" />
      <img class="imagem" src="http://placehold.it/50x50" />
      <img class="imagem" src="http://placehold.it/50x50" />
      <img class="imagem" src="http://placehold.it/50x50" />
      <img class="imagem" src="http://placehold.it/50x50" />
      <img class="imagem" src="http://placehold.it/50x50" />
    </div>
  </div>
</div>

1 Resposta 1

0

Fiz um exemplo aqui totalmente baseado no que você postou. Alterei o event listener de myBtn2 conforme abaixo e nos testes que realizei aqui funcionou corretamente.

Edit. Adicionei a função isElementInViewport baseada nesse post https://stackoverflow.com/a/7557433/4623423

Link recomendado para leitura https://developer.mozilla.org/pt-BR/docs/Web/API/Element/getBoundingClientRect

function isElementInViewport(element) {
    const rect = element.getBoundingClientRect();
    //console.log(rect.right, window.innerWidth ,scroll_container.clientWidth , document.body.clientWidth, document.documentElement.clientWidth)
    return (
        rect.left >= 0 && rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

// Avança
document.getElementById("myBtn2").addEventListener("click", function() {
    const lastImg = scroll_container.lastElementChild;
    if (isInViewport(lastImg)) {
        return;
    }
    initial -= (amount + margin);
    scroll_container.style.transform = "translateX(" + initial + "px)";
})
2
  • Obrigado! É quase isso, ele tem que parar de mover assim que o último item aparecer. Deixei uma imagem de exemplo. 25/02/2021 às 23:27
  • @LucasPedro Editei o post para que funcione igual ou mais próximo do que você precisa. 26/02/2021 às 0:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .