# Listen for Arrow keys/Mousewheel to scroll site?!

**URL:** <https://forum.freecodecamp.org/t/listen-for-arrow-keys-mousewheel-to-scroll-site/267427>\
**Category:** General\
**Created:** [March 26, 2019, 11:48am UTC](https://forum.freecodecamp.org/t/listen-for-arrow-keys-mousewheel-to-scroll-site/267427 "2019-03-26T11:48:03Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![AaronP](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/aaronp/32/112754_2.png) [@AaronP](https://forum.freecodecamp.org/u/AaronP)\
**Post date:** [March 26, 2019, 11:48am UTC](https://forum.freecodecamp.org/t/listen-for-arrow-keys-mousewheel-to-scroll-site/267427/1 "2019-03-26T11:48:03Z")

</div>

Hey guys, I am creating a website that is essentially a sidescroller, a 1 page website that is horizontally scrolling. I want there to be as little confusion as possible, so when a user presses the arrow down key I want the page to scroll right (forward 1 section id) and when they press up I want to go back up 1 section id. I also want to listen for mousewheel scroll down and up respectively.

Here is a pen of the side scrolling I currently have.

I think what I would need is event listeners however, how do I event listen for these and THEN choose exactly where to go just like as if they were clicking the navbar?  
Thanks!

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [March 26, 2019, 12:04pm UTC](https://forum.freecodecamp.org/t/listen-for-arrow-keys-mousewheel-to-scroll-site/267427/2 "2019-03-26T12:04:25Z")

</div>

No link to the pen there! If you can’t post links yet, then just the last part of the URL should do (eg `DanielCouper/pen/QoJbeJ`)

For the events though, write one function to handle scrolling left and one for scrolling right (just console.log at first to check it works), then

```auto
window.addEventListener('keydown' /* or keyup, see what feels better when you test it */, e => {
  switch (e.code) {
    case "ArrowUp":
      scrollLeft();
      break;
    case "ArrowDown":
      scrollRight();
      break;
    default:
      /* don't do anything */
  }
});

window.addEventListener('wheel', e => {
  if (e.deltaY < 0 /* or some negative number so it doesn't fire on the slightest touch*/) {
    // scrolled up
    scrollLeft();
  } else if (e.deltaY > 0 /* or some positive number so it doesn't fire on the slightest touch*/) {
    // scrolled down
    scrollRight();
  }
});

```

---

<div class="post-metadata">

**Author:** ![AaronP](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/aaronp/32/112754_2.png) [@AaronP](https://forum.freecodecamp.org/u/AaronP)\
**Post date:** [March 26, 2019, 12:29pm UTC](https://forum.freecodecamp.org/t/listen-for-arrow-keys-mousewheel-to-scroll-site/267427/3 "2019-03-26T12:29:00Z")

</div>

Sorry here is the pen! [https://codepen.io/anon/pen/jJRpKY](https://codepen.io/anon/pen/jJRpKY)

---

<div class="post-metadata">

**Author:** ![AaronP](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/aaronp/32/112754_2.png) [@AaronP](https://forum.freecodecamp.org/u/AaronP)\
**Post date:** [March 26, 2019, 12:38pm UTC](https://forum.freecodecamp.org/t/listen-for-arrow-keys-mousewheel-to-scroll-site/267427/4 "2019-03-26T12:38:44Z")

</div>

It seems my function on click for the nav link only works for the first link? Is this something to do with needing querySelectorAll or its only getting first child for some reason? 🙂

```auto
document.querySelector('a[href^="#"]').onclick = function(e) {
  console.log(this);
  // target element id
  let id = this.getAttribute("href");
  let selected = document.querySelector(id);
  console.log(selected);
  selected.style.transform = "translateX(0%)";
  // prevent standard hash navigation (avoid blinking in IE)
  e.preventDefault(); //try removing and add stopPropogation?
  //e.stopPropogation();
};

```

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [March 26, 2019, 12:45pm UTC](https://forum.freecodecamp.org/t/listen-for-arrow-keys-mousewheel-to-scroll-site/267427/5 "2019-03-26T12:45:32Z")

</div>

On what platform? Because it’s working fine for me, I’ve tried Firefox and Chrome (both on desktop).

(Note that stopPropagation would be useful if you had, say, an area which all had some onclick behaviour attached to it, then inside that you had an element with an onclick behaviour that did something different: if you didn’t use stopPropagation on the internal element, then clicking it would trigger the outer behaviour)

---

<div class="post-metadata">

**Author:** ![AaronP](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/aaronp/32/112754_2.png) [@AaronP](https://forum.freecodecamp.org/u/AaronP)\
**Post date:** [March 26, 2019, 12:48pm UTC](https://forum.freecodecamp.org/t/listen-for-arrow-keys-mousewheel-to-scroll-site/267427/6 "2019-03-26T12:48:12Z")

</div>

So when you click two it shows the blue section two? and three the yellow one the red etc?

Im on chrome, windows. and tried firefox.

Also while im here, do you know how to add to the current value for transform? get computed style then add to it? 🙂

---

<div class="post-metadata">

**Author:** ![AaronP](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/aaronp/32/112754_2.png) [@AaronP](https://forum.freecodecamp.org/u/AaronP)\
**Post date:** [March 26, 2019, 12:49pm UTC](https://forum.freecodecamp.org/t/listen-for-arrow-keys-mousewheel-to-scroll-site/267427/7 "2019-03-26T12:49:24Z")

</div>

Im console logging the object and it only logs when I click “one” ☹

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [March 26, 2019, 12:56pm UTC](https://forum.freecodecamp.org/t/listen-for-arrow-keys-mousewheel-to-scroll-site/267427/8 "2019-03-26T12:56:49Z")

</div>

> [@AaronP](#):
>
> So when you click two it shows the blue section two? and three the yellow one the red etc?

Yup yup. That’s wierd, afaics I’m getting exactly the behaviour you’re trying for.

> [@AaronP](#):
>
> Also while im here, do you know how to add to the current value for transform? get computed style then add to it?

Yep. However, you should just be able to give each panel an index starting at 0, then the transform is going to be something as basic as `index * 100%`. Keep a record of of which panel is the current one in the JS, and it means your calculations are easier & you don’t need to figure out computed style.

---

<div class="post-metadata">

**Author:** ![AaronP](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/aaronp/32/112754_2.png) [@AaronP](https://forum.freecodecamp.org/u/AaronP)\
**Post date:** [March 26, 2019, 12:58pm UTC](https://forum.freecodecamp.org/t/listen-for-arrow-keys-mousewheel-to-scroll-site/267427/9 "2019-03-26T12:58:58Z")

</div>

> [@AaronP](#):
>
> document.querySelector(‘a[href^=“#”]’).onclick = function(e) { console.log(this); // target element id let id = this.getAttribute(“href”); let selected = document.querySelector(id); console.log(selected); selected.style.transform = “translateX(0%)”; // prevent standard hash navigation (avoid blinking in IE) e.preventDefault(); //try removing and add stopPropogation? [//e.stopPropogation](https://e.stopPropogation)(); };

My website is now scrolling up and down rather than sideways ☹ Are you using JS to scroll, because i was trying to at just pure html smooth scroll was buggy if you clicked link as it was scrolling.

---

<div class="post-metadata">

**Author:** ![AaronP](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/aaronp/32/112754_2.png) [@AaronP](https://forum.freecodecamp.org/u/AaronP)\
**Post date:** [March 26, 2019, 1:03pm UTC](https://forum.freecodecamp.org/t/listen-for-arrow-keys-mousewheel-to-scroll-site/267427/10 "2019-03-26T13:03:59Z")

</div>

I think it was related to my scroll code as I didnt really need it, smooth scroll does it for me

---

<div class="post-metadata">

**Author:** ![AaronP](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/aaronp/32/112754_2.png) [@AaronP](https://forum.freecodecamp.org/u/AaronP)\
**Post date:** [March 26, 2019, 1:04pm UTC](https://forum.freecodecamp.org/t/listen-for-arrow-keys-mousewheel-to-scroll-site/267427/11 "2019-03-26T13:04:30Z")

</div>

Do you mean keep track by check classes and removing and adding or something else?

Ive done this so far

```auto
function scrollRight() {
  let selected = document.querySelector(".contentContainer");
  console.log(selected);
  selected.style.transform = "translateX(-100%)";
}
function scrollLeft() {
  let selected = document.querySelector(".contentContainer");
  console.log(selected);
  selected.style.transform = "translateX(0%)";
}

```

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [March 26, 2019, 1:26pm UTC](https://forum.freecodecamp.org/t/listen-for-arrow-keys-mousewheel-to-scroll-site/267427/12 "2019-03-26T13:26:02Z")

</div>

umm, am I looking at the same thing here? Following is based on that link from before, but it may be slightly different. I’m assuming you’re transforming the x-position of the container that hold all of the sections Anyway, I could see this:

![scroller](https://global.discourse-cdn.com/freecodecamp/original/3X/a/c/ac437e16d90253e20e22fef897d8d452ccaded03.gif)

You shouldn’t _really_ need to check classes, _something_ like:

```auto
const container = document.querySelector(".contentContainer");
// Get an array with all the sections
const sections = [...document.querySelectorAll('.section')];
// Need to know how many there are
const numSections = sections.length;
// Always going to start at 0. The maximum index is `numSections - 1`
let currentSectionId = 0;

```

Now you can check where you are and act accordingly:

```auto
function scrollRight() {
  let nextSectionId = (currentSectionId == numSections - 1) ? 0 : currentSectionId + 1;

  container.style.transform = `translateX(${currentSectionId * 100}%)`;
  currentSectionId = nextSectionId;
}

function scrollLeft() {
  let prevSectionId = (currentSectionId == 0) ? numSections - 1 : currentSectionId - 1;

  container.style.transform = `translateX(${currentSectionId * 100}%)`;
  currentSectionId = prevSectionId;
}

```

---

<div class="post-metadata">

**Author:** ![AaronP](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/aaronp/32/112754_2.png) [@AaronP](https://forum.freecodecamp.org/u/AaronP)\
**Post date:** [March 26, 2019, 1:51pm UTC](https://forum.freecodecamp.org/t/listen-for-arrow-keys-mousewheel-to-scroll-site/267427/13 "2019-03-26T13:51:53Z")

</div>

> [@DanCouper](#):
>
> function scrollRight() { let nextSectionId = (currentSectionId == numSections - 1) ? 0 : currentSectionId + 1; container.style.transform = `translateX(${currentSectionId * 100}%)`; currentSectionId = nextSectionId; } function scrollLeft() { let prevSectionId = (currentSectionId == 0) ? numSections - 1 : currentSectionId - 1; container.style.transform = `translateX(${currentSectionId * 100}%)`; currentSectionId = prevSectionId; }

Oh this is very cool, I had issues but changed the \*100’s to \*-100’s and seems to be working! Just need to add some animation scrolling etc 🙂 Thank you Ill see what I can do with this

---

<div class="post-metadata">

**Author:** ![AaronP](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/aaronp/32/112754_2.png) [@AaronP](https://forum.freecodecamp.org/u/AaronP)\
**Post date:** [March 26, 2019, 2:21pm UTC](https://forum.freecodecamp.org/t/listen-for-arrow-keys-mousewheel-to-scroll-site/267427/14 "2019-03-26T14:21:31Z")

</div>

It seems when going left and right its always going the same direction? Never left always right? I tried using -100% and got this effect but if one is \*100% and other is \*-100% then the \*100% action causes a white screen out of the width view.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 5:58pm UTC](https://forum.freecodecamp.org/t/listen-for-arrow-keys-mousewheel-to-scroll-site/267427/15 "2021-01-16T17:58:59Z")

</div>