Jump to content

Simular tecla pressionada ao clicar numa div


Recommended Posts

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">
		<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">
		<div class="slider">
		  	<div id="seta" style="">Seta</div>
		    <h1>Section One</h1>
		    <h1>Section Two</h1>
		    <h1>Section Three</h1>
		    <h1>Section Four</h1>
		    <h1>Section Five</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	$( "#seta" ).click(function() {

		var e = jQuery.Event("keydown");
		e.which = 39; // tecla direita
* {
  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;

	background: #000;
	width: 50px;
	height: 20px;
	color: #fff;
	background: rgb(5, 54, 125);

	background: rgb(43, 211, 148);

	background: rgb(5, 54, 125);

	background: rgb(43, 211, 148)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.