CODEWITHSUNDEEP
javascripthtmlcss
Red
Red

Reputation: 139

How can I go about creating a scrollable page content using arrow keys?

I'm just experimenting around with HTML and JavaScript and I'm a bit stumped on how I can do this.

I want to create a page that can be scrolled using arrow keys on the keyboard or pressing a button to scroll to the next page.

The idea is to have the content spread out but by using the arrow keys it'll go to the next piece of content without reloading the web page. I've tried a few things including AngularJS but I'd rather have it hardcoded and not using a framework (unless it's extremely difficult without)

paint example

So you can see that there'd be an arrow button/arrow key pressed which would trigger the next page. Could this be done in multiple HTML files or would it be better doing it all in one file and having each page of content in different divs?

Once I'd figured that out I'd be looking to implement an animation so that when the arrow is pressed you can see the next page overlap the previous one.

Upvotes: 1

Views: 1569

Answers (2)

Ohyeah101
Ohyeah101

Reputation: 1

for block code (i.e: code.org) you can use a if statement.

if: arrow key press else if: Img.of.arrow clicked then: move to page to ... etc

Upvotes: 0

Jack
Jack

Reputation: 1999

Try something like this

var selected = 2;

window.onkeyup = function(e) {
  if (e.key == 'ArrowRight') {
    right();
  } else if (e.key == 'ArrowLeft') {
    left();
  }
}

function left() {
  var section1 = document.getElementById('1');
  var section2 = document.getElementById('2');
  var section3 = document.getElementById('3');
  
  if (selected == 2) {
    section1.style.left = '0vw';
    section2.style.left = '100vw';
    section3.style.left = '200vw';
    
    selected = 1;
  } else if (selected == 3) {
    section1.style.left = '-100vw';
    section2.style.left = '0vw';
    section3.style.left = '100vw';
    
    selected = 2;
  }
}

function right() {
  var section1 = document.getElementById('1');
  var section2 = document.getElementById('2');
  var section3 = document.getElementById('3');
  
  if (selected == 1) {
    section1.style.left = '-100vw';
    section2.style.left = '0vw';
    section3.style.left = '100vw';
    
    selected = 2;
  } else if (selected == 2) {
    section1.style.left = '-200vw';
    section2.style.left = '-100vw';
    section3.style.left = '0vw';
    
    selected = 3;
  }
}
body, html {
  margin: 0px;
  font-family: Arial;
  overflow: hidden;
}

.header {
  width: calc(100vw - 32px);
  height: 10vh;
  padding: 16px;
  background-color: black;
  color: white;
  font-size: 32px;
  text-align: center;
}

.scrollale {
  width: 100vw;
  height: calc(90vh - 32px); /* For the padding of the header */
  overflow: hidden; /* Remove the scroll bar from the bottom */
}

.scroll {
  position: absolute;
  top: 40vh;
  font-size: 48px;
  user-select: none;
  z-index: 10;
}

.scroll:hover {
  cursor: pointer;
  color: grey;
}

.left {
  left: 16px;
}

.right {
  right: 16px;
}

.section {
  position: absolute;
  width: 100vw;
  height: calc(90vh - 32px); /* For the padding of the header*/
  font-size: 72px;
  text-align: center;
  transition: 0.5s;
}

.part1 {
  left: -100vw;
}

.part2 {
  left: 0vw;
}

.part3 {
  left: 100vw;
}
<div class="header">Header</div>
<div class="scrollable">
  <div class="scroll left" onclick="left()"><</div>
  <div id="1" class="section part1">Section 1</div>
  <div id="2" class="section part2">Section 2</div>
  <div id="3" class="section part3">Section 3</div>
  <div class="scroll right" onclick="right()">></div>
</div>

If the arrow keys don't work try clicking the buttons frist (to select it).

Edit

I the key detection method to use the key value which should be more consistent.

Upvotes: 2

Related Questions