Is it possible to create arrow-key navigation without JavaScript?

user_6249025 0
Viewed 40

I want to use the arrow keys to go back and forth, as it usually done on webcomics sites (e.g. there), but I don't want to include JavaScript. In other words, I want that certain links on the page could be clicked not only by mouse, but also by using certain keys.

Is it possible to make this using HTML+CSS only?

css html
1 Answers

Yes, it is. All you need to do is use scroll snapping.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap

const c = document.querySelectorAll('.panel');

for (i = 0; i < c.length; i++) {
  const r = Math.random() * 255,
    g = Math.random() * 255,
    b = Math.random() * 255;
  c[i].style.setProperty('--color', `rgb(${r}, ${g}, ${b})`);
}
#scroller {
  width: 300px;
  height: 300px;
  background: #eee;
  display: flex;
  overflow: auto;
  scroll-snap-type: x mandatory;
}

.panel {
  width: 300px;
  height: 300px;
  background-color: var(--color);
  flex-shrink: 0;
  scroll-snap-align: center;
}
<div id="scroller">
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
</div>

user_46331970
Related