Move Scroll with Buttons

Question

Move Scroll with Buttons

Navigation

#1 by (1 votes)

1

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

Example:

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 referenced buttons are in the upper right corner.

javascript html css javascript-eventos

asked by anonymous 09.09.2018 / 07:09

1 answer

Check the names of the pilots sponsored by a Team How to change owl-nav's position on the Owl.Carousel

score 1 · Accepted Answer

What you can do is scroll sideways by moving the scroll of the div to the same width as the images in the gallery. As 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 very complicated) to scroll to show exactly the next one outside the window (which you called of "hidden").

To do this, 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 scrollSuave() function, you have an easing code called easeOutCubic . This code is responsible for the smooth scrolling behavior. You can exchange whatever you like on this page with several functions already done, just change the return of function.

See working:

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>