javascript - 滚动条不会出现在 CSS 的下拉列表中

问题描述

const select = document.querySelectorAll('.selectBtn');
const option = document.querySelectorAll('.option');
let index = 1;

select.forEach(a => {
  a.addEventListener('click', b => {
    const next = b.target.nextElementSibling;
    next.classList.toggle('toggle');
    next.style.zIndex = index++;
  })
})
option.forEach(a => {
  a.addEventListener('click', b => {
    b.target.parentElement.classList.remove('toggle');
    
    const parent = b.target.closest('.select').children[0];
    parent.setAttribute('data-type', b.target.getAttribute('data-type'));
    parent.innerText = b.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>

我在“.select .selectDropdown”中添加了滚动条，没有出现也无法使用。我只想默认显示 5 个项目，其余项目必须使用滚动条向下显示。我尝试了几种方法，但无法做到。如果有人能告诉我如何做到这一点，我真的很感激。谢谢

我不知道要添加更多详细信息，网站要求我添加更多

标签： javascripthtmlcss

javascript - 滚动条不会出现在 CSS 的下拉列表中

问题描述

解决方案

推荐阅读