Selector and options

selector and options made out of div elements.

by thelifeisyours

HTML

<TLIYselect>
  <TLIYoption value="0" selected>2235</TLIYoption>
  <TLIYoption value="1">1910</TLIYoption>
  <TLIYoption value="2">2010</TLIYoption>
  <TLIYoption value="3">3102</TLIYoption>
  <TLIYoption value="4">4234</TLIYoption>
  <TLIYoption value="5">6425</TLIYoption>
  <TLIYoption value="6">6752</TLIYoption>
  <TLIYoption value="7">7126</TLIYoption>
  <TLIYoption value="8">8754</TLIYoption>
  <TLIYoption value="9">9235</TLIYoption>
  <TLIYoption value="10">1340</TLIYoption>
</TLIYselect>

CSS

html,
body {
  padding: 0;
  margin: 0;
}

body {
  background: #20262e;
  color: #fff;
  font-family: Arial, sans-serif;
}

TLIYselect {
  display: block;
  width: 6em;
  height: 2.5em;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.7);
  transition: height ease .32s;
}

TLIYoption {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2em;
  color: #fff;
}

TLIYoption[checked] {
  background: rgba(100, 100, 255, 0.2);
}TLIYoption[checked]:hover {
  color: #fff;
  background: rgba(100, 100, 255, 0.4);
}

TLIYselect::-webkit-scrollbar {
  width: .2em;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 1em;
}
TLIYselect::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 1em;
}

JavaScript

"use-strict";
let mouseInsideElement = false;

selectors = document.querySelectorAll("TLIYselect");

function selectorOnClick($this) {
  let $parent = $this.target.parentNode;

  $parent.setAttribute('value', $this.target.getAttribute('value'));
  $this.target.scrollIntoView();
	
  for (let $child of $parent.children) {
    $child.removeAttribute('selected');
  }
  $this.target.setAttribute('selected','');
}

function selectorOptionScrollToView($this) {
	if(!mouseInsideElement){
		console.log("A");
		for (let $child of $this.target.children) {
			if($child.hasAttribute('selected')){
				$child.scrollIntoView();
			}
		}
	}
}

function selectorShowDropDown() {

}

for (let selector of selectors) {
  selector.addEventListener('click', selectorShowDropdown);
	
  selector.addEventListener('transitionend', selectorOptionScrollToView);
	
  selector.addEventListener('mouseleave', () => {
		mouseInsideElement = false;
	});
	
  selector.addEventListener('mouseenter', () => {
		mouseInsideElement = true;
	});
}