1

Tenho um scroll horizontal, como faço pra pegar o início e fim do scroll, preciso habilitar e desabilitar as setas.

function avancar() {
  document.getElementById('elementos').scrollLeft += 20;
}

function voltar() {
  document.getElementById('elementos').scrollLeft -= 20;
}
ul {
  width: 500px;
  border: solid 1px;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0;
}

li {
  display: inline-block;
  width: 160px;
  text-align: center;
}

li:first-child {
  background: yellow;
}

li:last-child {
  background: red;
}

a {
  color: #333;
  text-decoration: none;
  margin: 20px;
}
<ul id="elementos">
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
</ul>

<a href="#" onClick="voltar();">&lt; Voltar</a>
<a href="#" onClick="avancar();">Avançar &gt;</a>

0

1 Resposta 1

1

Tens de saber 3 coisas:

  • a posição do scroll: el.scrollLeft
  • a largura do elemento: el.clientWidth
  • o máximo que podes fazer scroll: el.scrollWidth

Tendo isso as contas ficam fáceis, e podes fazer assim:

var el = document.getElementById('elementos');
var botoes = document.querySelectorAll('a');
var voltar = botoes[0];
var avancar = botoes[1];

function mover(direcao) {
  el.scrollLeft += 20 * direcao;
  var inicio = el.scrollLeft == 0;
  var fim = el.clientWidth + el.scrollLeft - el.scrollWidth;
  voltar.style.opacity = inicio ? 0 : 1;
  avancar.style.opacity = fim ? 1 : 0;
}
ul {
  width: 500px;
  border: solid 1px;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0;
}

li {
  display: inline-block;
  width: 160px;
  text-align: center;
}

li:first-child {
  background: yellow;
}

li:last-child {
  background: red;
}

a {
  color: #333;
  text-decoration: none;
  margin: 20px;
  transition: opacity 0.5s;
}
<ul id="elementos">
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
</ul>

<a href="#" onClick="mover(-1);" style="opacity: 0;">&lt; Voltar </a>
<a href="#" onClick="mover(1);">Avançar &gt;</a>

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 .