Move Scroll with Buttons

Asked

Viewed 858 times

1

I need to move a horizontal scroll with buttons. I have a horizontal gallery with horizontal scroll, and I need to click the buttons in the upper right corner "next/previous" the scroll move to the next or previous image depending on the button clicked.

Example: Exemplo

code:

function mostra(theId){
	var theArray= new Array('item1', 'item2', 'item3', 'item4', 'item5', 'item6');
	for(i=0; i<theArray.length; i++){
		if(theArray[i] == theId){
			document.getElementById(theId).style.display='block';
		}else{
			document.getElementById(theArray[i]).style.display='none';
		}
	}
}
* {
	box-sizing: inherit;
}

.menu_horizontal {
	position: relative;
	/*padding: 0 11px;*/
	box-sizing: border-box;
}

.trilho_classe {
    /* Make this scrollable when needed */
    overflow-x: auto;
    /* We don't want vertical scrolling */
    overflow-y: hidden;
    /* For WebKit implementations, provide inertia scrolling */
    -webkit-overflow-scrolling: touch;
    /* We don't want internal inline elements to wrap */
    white-space: nowrap;
    /* If JS present, let's hide the default scrollbar */
    .js & {
        /* Make an auto-hiding scroller for the 3 people using a IE */
        -ms-overflow-style: -ms-autohiding-scrollbar;
        /* Remove the default scrollbar for WebKit implementations */
        &::-webkit-scrollbar {
            display: none;
        }
    }
	/* positioning context for advancers */
	position: relative;
	/*Crush the whitespace here*/
	font-size: 0;
}

.trilho_classe_Contents {
	float: left;
	transition: transform .2s ease-in-out;
	position: relative;
}

.trilho_classe_Contents-no-transition {
	transition: none;
}

.trilho_classe_Link {
	text-decoration: none;
	color: #888;
	/*Reset the font size*/
	font-size: 1.2rem;
	font-family: -apple-system, sans-serif;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	border: 1px solid transparent;
	padding: 0 11px;
	& + & {
		border-left-color: #eee;
	}
	&[aria-selected="true"] {
		color: #111;
	}
}

.trilho_classe_Indicator {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 4px;
	width: 100px;
	background-color: transparent;
	transform-origin: 0 0;
	transition: transform .2s ease-in-out, background-color .2s ease-in-out;
}
	
.trilho_classe_Link2 {
	text-decoration: none;
	color: #888;
	/*Reset the font size*/
	font-size: 1.2rem;
	font-family: -apple-system, sans-serif;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	border: 1px solid transparent;
	padding: 0 11px;
	& + & {
		border-left-color: #eee;
	}
	&[aria-selected="true"] {
		color: #111;
	}
}
#caixas{
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-top: 10px;
		
	}
	#caixas2{
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-top: 10px;
		
	}
		.conteudocaixas{
			overflow-x: scroll;
			overflow-y: hidden;
			white-space: nowrap;
		}
		.imagemcaixas{
			margin-top: 5px;
			width: 12.15%;
			max-width: 170px;
			height: auto;
			display: inline-block;
		}
		.position_btcx{
			display: inline-block;
			margin: 6px 10px 0 0;
    		float: right;
		}
		.button_cx{
			background: #fff;
			height: 30px;
			width: 30px;
			border: 1px solid #000;
			border-radius: 5px;
			margin-right: 5px;
		}
		
	.caixa1{
		/*margin: 0 0.5% 0 0.5%;*/
	}
	.caixa2{
		/*margin: 0 0.5% 0 0.5%;*/
	}
<div id="caixas">
	<div class="caixa1">
		<div class="menu_horizontal">
			<nav id="trilho" class="trilho_classe">
    
				<div id="trilhoContents" class="trilho_classe_Contents">
					<a onclick="mostra('item1');" style="cursor: hand;" href="#" class="trilho_classe_Link" aria-selected="true">Galeria1</a>
					<a onclick="mostra('item2');" style="cursor: hand;" href="#" class="trilho_classe_Link" aria-selected="false">Galeria2</a>
					<a onclick="mostra('item3');" style="cursor: hand;" href="#" class="trilho_classe_Link" aria-selected="false">Galeria3</a>
				<span id="indicador" class="trilho_classe_Indicator" style="transform: translateX(0px) scaleX(0.965781); background-color: rgb(0, 191, 255);"></span>
				</div>
				<div class="position_btcx">
					<button class="button_cx" type="button">&lt;</button>
					<button class="button_cx" type="button">&gt;</button>
				</div>
			</nav>
			<div id="item1" style="display: block;">
				<div class="conteudocaixas dragscroll">
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
				</div>
			</div>

			<div id="item2" style="display: none;">
				<div class="conteudocaixas dragscroll">
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
				</div>
			</div>

			<div id="item3" style="display: none;">
				<div class="conteudocaixas dragscroll">
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
				</div>
			</div>
		</div>
	</div>
</div>

The reference buttons are in the upper right corner.

javascript html css javascript-events

1 answer

1


What you can do is scroll sideways by moving the div scroll at the same width as the gallery images. Because the width of the images has no relation to the width of the window (or the div where they are grouped), it is impossible (or at least too complicated) to scroll to show exactly the next one outside the window (which you called "hidden").

To accomplish the effect, I created some functions that move the scroll to the sides according to the button clicked (see explanations in the code).

If you notice in the function scrollSuave(), has a code of easing called easeOutCubic. This code is responsible for the smooth behavior of the scroll. You can exchange it for what you like the most on this page with several functions already ready, just change the return of function.

See in operation:

function mostra(theId){
   var theArray= new Array('item1', 'item2', 'item3');
   for(i=0; i<theArray.length; i++){
      if(theArray[i] == theId){
         document.getElementById(theId).style.display='block';
      }else{
         document.getElementById(theArray[i]).style.display='none';
      }
   }
}

// Cria um evento "click" para cada botão
var botScroll = document.querySelectorAll(".position_btcx .button_cx");
for(var x=0; x<botScroll.length; x++){
   (function(x){
      botScroll[x].onclick = function(){
         moveScroll(x, cxAtiva().box_ativo, cxAtiva().img_width);
      }
   })(x);
}

// Função que faz o scroll suave
function scrollSuave(old, des, atu, ele){
    var easeOutCubic = function (t) { return (--t)*t*t+1 };
    atu += 1; // move de 1 em 1 pixel. Aumentando o valor, irá aumentar a velocidade
    var ease = easeOutCubic(atu/100);
    var del = des-old;
    del *= ease;
    del += old;
    ele.scrollTo(del, 0);
    if(atu < 100){
      window.requestAnimationFrame(function (){
        scrollSuave(old, des, atu, ele);
      });
    }
}

// Função para buscar e retornar a galeria ativa
function cxAtiva(){
   var ele = document.querySelectorAll(".conteudocaixas");
   for(var x=0; x<ele.length; x++){
      if(ele[x].parentNode.style.display == "block") break;
   }

   return {
      box_ativo: x, // retorna a galeria visível (ativa)
      img_width: ele[x].querySelector("img").offsetWidth // retorna a largura das imagens
   }
}

function moveScroll(idx, cca, wid){
   var ele = document.querySelectorAll(".conteudocaixas");
   var ccs = ele[cca];
   var ccs_s = ccs.scrollLeft;
   // idx == 1 significa que segundo botão foi clicado (para a direita)
   scrollSuave(ccs_s, idx == 1 ? wid+ccs_s : ccs_s-wid, 0, ccs);
}
* {
	box-sizing: inherit;
}

.menu_horizontal {
	position: relative;
	/*padding: 0 11px;*/
	box-sizing: border-box;
}

.trilho_classe {
    /* Make this scrollable when needed */
    overflow-x: auto;
    /* We don't want vertical scrolling */
    overflow-y: hidden;
    /* For WebKit implementations, provide inertia scrolling */
    -webkit-overflow-scrolling: touch;
    /* We don't want internal inline elements to wrap */
    white-space: nowrap;
    /* If JS present, let's hide the default scrollbar */
    .js & {
        /* Make an auto-hiding scroller for the 3 people using a IE */
        -ms-overflow-style: -ms-autohiding-scrollbar;
        /* Remove the default scrollbar for WebKit implementations */
        &::-webkit-scrollbar {
            display: none;
        }
    }
	/* positioning context for advancers */
	position: relative;
	/*Crush the whitespace here*/
	font-size: 0;
}

.trilho_classe_Contents {
	float: left;
	transition: transform .2s ease-in-out;
	position: relative;
}

.trilho_classe_Contents-no-transition {
	transition: none;
}

.trilho_classe_Link {
	text-decoration: none;
	color: #888;
	/*Reset the font size*/
	font-size: 1.2rem;
	font-family: -apple-system, sans-serif;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	border: 1px solid transparent;
	padding: 0 11px;
	& + & {
		border-left-color: #eee;
	}
	&[aria-selected="true"] {
		color: #111;
	}
}

.trilho_classe_Indicator {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 4px;
	width: 100px;
	background-color: transparent;
	transform-origin: 0 0;
	transition: transform .2s ease-in-out, background-color .2s ease-in-out;
}
	
.trilho_classe_Link2 {
	text-decoration: none;
	color: #888;
	/*Reset the font size*/
	font-size: 1.2rem;
	font-family: -apple-system, sans-serif;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	border: 1px solid transparent;
	padding: 0 11px;
	& + & {
		border-left-color: #eee;
	}
	&[aria-selected="true"] {
		color: #111;
	}
}
#caixas{
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-top: 10px;
		
	}
	#caixas2{
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-top: 10px;
		
	}
		.conteudocaixas{
			overflow-x: scroll;
			overflow-y: hidden;
			white-space: nowrap;
		}
		.imagemcaixas{
			margin-top: 5px;
			width: 12.15%;
			max-width: 170px;
			height: auto;
			display: inline-block;
		}
		.position_btcx{
			display: inline-block;
			margin: 6px 10px 0 0;
    		float: right;
		}
		.button_cx{
			background: #fff;
			height: 30px;
			width: 30px;
			border: 1px solid #000;
			border-radius: 5px;
			margin-right: 5px;
		}
		
	.caixa1{
		/*margin: 0 0.5% 0 0.5%;*/
	}
	.caixa2{
		/*margin: 0 0.5% 0 0.5%;*/
	}
<div id="caixas">
	<div class="caixa1">
		<div class="menu_horizontal">
			<nav id="trilho" class="trilho_classe">
    
				<div id="trilhoContents" class="trilho_classe_Contents">
					<a onclick="mostra('item1');" style="cursor: hand;" href="#" class="trilho_classe_Link" aria-selected="true">Galeria1</a>
					<a onclick="mostra('item2');" style="cursor: hand;" href="#" class="trilho_classe_Link" aria-selected="false">Galeria2</a>
					<a onclick="mostra('item3');" style="cursor: hand;" href="#" class="trilho_classe_Link" aria-selected="false">Galeria3</a>
				<span id="indicador" class="trilho_classe_Indicator" style="transform: translateX(0px) scaleX(0.965781); background-color: rgb(0, 191, 255);"></span>
				</div>
				<div class="position_btcx">
					<button class="button_cx" type="button">&lt;</button>
					<button class="button_cx" type="button">&gt;</button>
				</div>
			</nav>
			<div id="item1" style="display: block;">
				<div class="conteudocaixas dragscroll">
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
				</div>
			</div>

			<div id="item2" style="display: none;">
				<div class="conteudocaixas dragscroll">
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
				</div>
			</div>

			<div id="item3" style="display: none;">
				<div class="conteudocaixas dragscroll">
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
				</div>
			</div>
		</div>
	</div>
</div>

  • There is no way to take the position of each "image" and put to scroll the right scroll to next without assigning a fixed value to the movement?

  • 1

    If you can adjust the images to appear right on the screen width, it would be possible. But this way I find it very complicated.

Browser other questions tagged javascript html css javascript-events

You are not signed in. Login or sign up in order to post.