Select tests

by Luckypouet

HTML

<div class="spacer"></div>
<div class="select">
  <div class="value">Yooohooo</div>
  <div class="outsider">
    <div class="options" aria-visible="false">
      <div class="option">01</div>
      <div class="option">02</div>
      <div class="option">03</div>
      <div class="option">04</div>
      <div class="option">05</div>
    </div>
  </div>
</div>
<div class="spacer"></div>

CSS

*{
  box-sizing: border-box;  
}

.spacer{
  height: 1000px;
  border: 1px dotted red;
  margin: 16px 0;
}
.select{
  cursor: pointer;
  position: relative;
}
.value{
  height: 50px;
  padding: 16px;
  background: #FFC;
}
.outsider{
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  position: absolute;
  top: -122px;
  left: 0;
  right: 0;
  bottom: -122px;
  border:1px dashed green;
}
.options{
  pointer-events: all;
  width: 100%;
  position: sticky;
  bottom: 0;
  padding: 16px;
  background: #CFC;
}
.options[aria-visible="true"]{
  display: block;
}
.options[aria-visible="false"]{
  display: none;
}

JavaScript

document.querySelector('.options').addEventListener('click', (e)=>{
	const options = e.target;
  const ariaAttr = 'aria-visible'
  const isVisible = options.getAttribute(ariaAttr) === 'true';
  options.setAttribute(ariaAttr, (!isVisible).toString())
})