Simular tecla pressionada ao clicar numa div

onurb22 · September 1, 2021 at 11:47 AM

Boa tarde,

estava a fazer testes num projecto com full scroll apenas com css.

Na versão horizontal, e como está full screen, é necessário usar a tecla esquerda ou direita do teclado para mover entre secções. Então queria criar uma seta numa div que ao ser clicada simulava que tinha sido pressionada a tecla esquerda ou direita. Mas não estou a conseguir. Abaixo o meu código.

Um grande obrigado

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="css/style2.css">
		<title>PROJECTO</title>
	</head>
	<body>
		<div class="slider">
		  <section>
		  	<div id="seta" style="">Seta</div>
		    <h1>Section One</h1>
		  </section>
		  <section>
		    <h1>Section Two</h1>
		  </section>
		  <section>
		    <h1>Section Three</h1>
		  </section>
		  <section>
		    <h1>Section Four</h1>
		  </section>
		  <section>
		    <h1>Section Five</h1>
		  </section>
		</div>
	</body>
</html>		
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
	$( "#seta" ).click(function() {
		console.log("entrou");

		var e = jQuery.Event("keydown");
		e.which = 39; // tecla direita
		$("body").trigger(e);
	});
</script>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  overflow-y: hidden;
}
.slider {
  font-family: sans-serif;
  scroll-snap-type: x mandatory;  
  display: flex;
  -webkit-overflow-scrolling: touch;
  overflow-x: scroll;
}
section {
  border-right: 1px solid white;
  padding: 1rem;
  min-width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
  text-align: center;
  position: relative;
}

#seta{
	background: #000;
	width: 50px;
	height: 20px;
	color: #fff;
}
.one{
	background: rgb(5, 54, 125);
}

.two{
	background: rgb(43, 211, 148);
}

.three{
	background: rgb(5, 54, 125);
}

.four{
	background: rgb(43, 211, 148)
}

Zex · September 3, 2021 at 11:10 AM

O mais fácil seria ter secções invisíveis

e controlar a invisibilidade com clicks de rato.

Sign In

Simular tecla pressionada ao clicar numa div

Recommended Posts

onurb22

Link to comment

Share on other sites

Zex

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information