const elements = document.querySelectorAll('.selectBtn');
const options = document.querySelectorAll('.option');
let zIndexValue = 1;
elements.forEach(element => {
element.addEventListener('click', event => {
const nextElement = event.target.nextElementSibling;
nextElement.classList.toggle('toggle');
nextElement.style.zIndex = zIndexValue++;
})
})
options.forEach(option => {
option.addEventListener('click', event => {
event.target.parentElement.classList.remove('toggle');
const parentElement = event.target.closest('.select').children[0];
parentElement.setAttribute('data-type', event.target.getAttribute('data-type'));
parentElement.innerText = event.target.innerText;
})
}).select {
position: relative;
margin-bottom: 15px;
width: 250px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.select .selectBtn {
background: var(--bg1);
padding: 10px;
box-sizing: border-box;
border-radius: 3px;
width: 100%;
cursor: pointer;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: #fff;
}
.select .selectBtn:after {
content: "";
position: absolute;
top: 45%;
right: 15px;
width: 6px;
height: 6px;
-webkit-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
border-right: 2px solid #666;
border-bottom: 2px solid #666;
transition: 0.2s ease;
}
.select .selectBtn.toggle {
border-radius: 3px 3px 0 0;
}
.select .selectBtn.toggle:after {
-webkit-transform: translateY(-50%) rotate(-135deg);
transform: translateY(-50%) rotate(-135deg);
}
.select .selectDropdown {
position: absolute;
top: 100%;
width: 100%;
border-radius: 0 0 3px 3px;
overflow-y: scroll;
overflow-x: hidden;
background: var(--bg1);
border-top: 1px solid #eee;
z-index: 1;
background: #fff;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: top center;
transform-origin: top center;
visibility: visible;
transition: 0.2s ease;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
.select .selectDropdown .option {
padding: 10px;
box-sizing: border-box;
cursor: pointer;
}
.select .selectDropdown .option:hover {
background: #f8f8f8;
}
.select .selectDropdown.toggle {
visibility: visible;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
body {
margin: 50px;
display: flex;
flex-direction: column;
align-items: center;
background: #eee;
} <div class="select">
<div class="selectBtn" data-type="firstOption">First option</div>
<div class="selectDropdown">
<div class="option" data-type="firstOption">1</div>
<div class="option" data-type="secondOption">2</div>
<div class="option" data-type="thirdOption">3</div>
<div class="option" data-type="forthOption">4</div>
<div class="option" data-type="fifthOption">5</div>
<div class="option" data-type="sixthOption">6</div>
<div class="option" data-type="sixthOption">7</div>
<div class="option" data-type="sixthOption">8</div>
<div class="option" data-type="sixthOption">9</div>
<div class="option" data-type="sixthOption">10</div>
</div>I'm facing an issue with the scrollbar in ".select .selectDropdown". It doesn't appear and I can't use it. My objective is to display only 5 items by default and have the rest accessible via scrolling. Despite trying multiple approaches, I haven't been able to achieve this. Any assistance on how to accomplish this would be greatly appreciated. Thank you.
The website prompts me to provide more details, but I am unsure of what else to add.