Scroll to

by incutonez

HTML

<div class="wrapper">
</div>

CSS

.wrapper {
  height: 200px;
  overflow: auto;
  position: absolute;
  width: 100px;
}

.group {
  color: darkred;
  margin-bottom: 0.25rem;
}

.group:not(:first-child) {
  margin-top: 0.5rem;
}

.items-wrapper {
  position: relative;
}

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.hover {
  background-color: gray;
}

JavaScript 1.7

let hovered = 0;
let hoverItem;
const wrapper = document.querySelector(".wrapper");
for (let i = 0; i < 30; i++) {
  if (i % 10 === 0) {
  const group = document.createElement("div");
  group.innerHTML = `Group ${i}`;
  group.classList.add("group")
  wrapper.appendChild(group);
  }
  const item = document.createElement("div");
  item.innerHTML = `Item ${i}`;
  item.classList.add("item")
  wrapper.appendChild(item);
}
function getItem(direction = 1) {
	hovered += direction;
  if (hoverItem) {
  	hoverItem.classList.remove("hover");
    if (direction === -1) {
      hoverItem = hoverItem.previousElementSibling;
    }
    else {
      hoverItem = hoverItem.nextElementSibling;
    }
  }
  while (hoverItem && !hoverItem.classList.contains("item")) {
    if (direction === -1) {
      hoverItem = hoverItem.previousElementSibling;
    }
    else {
      hoverItem = hoverItem.nextElementSibling;
    }
  }
  console.log(hoverItem, hovered);
  if (!hoverItem) {
  	const items = wrapper.getElementsByClassName("item");
  	if (direction === 1) {
    	hoverItem = items[0];
    	hovered = 1;
    }
    else {
    	hoverItem = items[items.length - 1];
      hovered = items.length;
    }
  }
  hoverItem.classList.add("hover");
  	hoverItem.scrollIntoView({ block: 'nearest' });
}

function scrollDown() {
getItem();
}
function scrollUp() {
getItem(-1);
}
function keyDown({keyCode}) {
  if (keyCode === 40) {
  scrollDown();
  }
  else if (keyCode === 38) {
  scrollUp();
  }
}
document.addEventListener("keydown", keyDown);