javascript - 父项已隐藏的自定义下拉列表(custom dropdown with parent having overflow hidden)

Question

As far as I can see, building a custom select box is somehow problematic on web clients.

(据我所知，在Web客户端上构建自定义选择框存在某种问题。)

It basically boils down to 2 options at high level:

(从根本上讲，它大致可以归结为2个选项：)

1. Append the options dropdown to the element itself.

   (将选项下拉列表附加到元素本身。)

   In this case, if a parent of the select box has overflow: hidden , dropdown will be clipped if it overflows.

   (在这种情况下，如果选择框的父级具有overflow: hidden ，则下拉菜单将在溢出时被剪切。)

2. Append the options dropdown to body, in this case, parents having overflow: hidden won't be a problem, but we'd need to track multiple events that could change the position/size of the select element (scrolling, this could be any parent element of the select box, resizing, select element getting hidden inside a scrollable element etc.), and this seems both difficult to manage and as many things need to be tracked real time, can cause performance issues.

   (将选项下拉列表附加到正文，在这种情况下，父母有overflow: hidden不会有问题，但是我们需要跟踪多个事件，这些事件可能会更改select元素的位置/大小（滚动，可以是任何选择框的父元素，调整大小，将选择元素隐藏在可滚动元素内等），这似乎既难以管理，又需要实时跟踪许多内容，可能会导致性能问题。)

My question is, with the latest state of html / css / javascript supported by browsers, is there a new way to handle these problems, that weren't available before?

(我的问题是，由于浏览器支持html / css / javascript的最新状态，是否有新方法来处理这些以前没有的问题？)

Or maybe there is another option than the ones I pointed out above.

(也许除了我上面指出的以外，还有其他选择。)

Fiddle explaining the two cases

(小提琴解释这两种情况)

  ask by Ozgur Akcali translate from so

Answer 1

Basic example of what I mean.

(我的意思的基本示例。)

There's more options that we have room on the screen so the fake select will overflow its parent and also the bottom of the screen.

(屏幕上还有更多选择，因此伪造的选择将覆盖其父对象以及屏幕底部。)

Could you check what is missing here to fix your issue?

(您能否检查此处缺少的内容以解决您的问题？)

 const dropdown = document.querySelector( '.select' ); const selected = document.querySelector( '.selected' ); const default_text = '... Select options ...'; dropdown.addEventListener( 'click', event => { const classes = event.target.classList; if ( classes.contains( 'option' )) { // clicked first element // open the dropdown. // update the label if needed. if ( classes.contains( 'selected' )) { dropdown.classList.toggle( 'active' ); if ( selected.innerHTML !== default_text ) selected.innerHTML = default_text; } // clicked other element // close the dropdown // update the label else { dropdown.classList.remove( 'active' ); selected.innerHTML = event.target.innerHTML; } } }); 

 * { margin: 0; padding: 0; } .container { background-color: yellow; margin: 2rem; overflow: hidden; padding: 2rem; } .select { list-style: none; height: 22px; /* 20px + 2px borders */ overflow: hidden; position: absolute; z-index: 1; } .select.active { overflow: visible; } .option { background-color: #EEEEEE; border: 1px solid black; border-top: none; height: 20px; } .selected { border-top: 1px solid black; } label, input { background-color: #EEEEEE; border: 1px solid black; margin: 4px; } 

 <section class="container"> <label>Name:</label> <input type="text" value=""> <ul class="select"> <li class="option selected">... Select options ...</li> <li class="option">1</li> <li class="option">2</li> <li class="option">3</li> <li class="option">4</li> <li class="option">5</li> <li class="option">6</li> <li class="option">7</li> <li class="option">8</li> <li class="option">9</li> <li class="option">10</li> <li class="option">11</li> <li class="option">12</li> <li class="option">13</li> <li class="option">14</li> <li class="option">15</li> <li class="option">16</li> <li class="option">17</li> <li class="option">18</li> <li class="option">19</li> <li class="option">20</li> <li class="option">21</li> <li class="option">22</li> <li class="option">23</li> <li class="option">24</li> <li class="option">25</li> </ul> <label>Value:</label> <input type="text" value=""> </section>