JSFiddle - React, Tailwind, and code Playground

HTML

<select id="selectbox" multiple>
    <option id='1'>1</option>
    <option id='2'>2</option>
    <option id='3'>3</option>
    <option id='4'>4</option>
    <option id='5'>5</option>
    <option id='6'>6</option>
    <option id='7'>7</option>
    <option id='8'>8</option>
    <option id='9'>9</option>
    <option id='10'>10</option>
    <option id='11'>11</option>
    <option id='12'>12</option>
    <option id='13'>13</option>
    <option id='14'>14</option>
    <option id='15'>15</option>
    <option id='16'>16</option>
    <option id='17'>17</option>
    <option id='18'>18</option>
    <option id='19'>19</option>
    <option id='20'>20</option>
</select>

<div id='mine'>
    
</div>

CSS

select {
    border:1px solid #ccc;
    vertical-align:top;
    height:60px;
}

#mine {
    height: 1000px;
    border: 1px solid black;
    width: 100px;
}

JavaScript

document.getElementById('selectbox').onmouseenter = function(){
    document.body.style.overflow = 'hidden';
};

document.getElementById('selectbox').onmouseout = function(){
    document.body.style.overflow = 'auto';
};