Почему мой div исчезает, когда я навожу его над родительским div?

Question

Я пытаюсь построить структуру с 3 полосами прокрутки, одной сверху таблицы, одной снизу и одной крошечной полосой прокрутки, которая появляется только при наведении на таблицу (потому что это большая таблица). И эта крошечная полоса прокрутки должна следовать за вами, пока вы не выйдете из-за стола. Таким образом, я строю структуру в 3 части.

Первые две части - буквально крошечная полоса прокрутки и верхняя полоса прокрутки. Но третья часть более сложная. Во-первых, у нас есть основной div, который содержит все div. Затем я положил div, чтобы начать структуру полосы прокрутки. Затем я помещаю div И таблицу в новый div. Div рядом с таблицей предназначен для перемещения по таблице, чтобы создать зону взаимодействия между мышью пользователя и крошечной полосой прокрутки. Мне нужен этот div, потому что я не хочу, чтобы вся таблица имела такой тип взаимодействия, действительно, самая верхняя часть таблицы и самая нижняя часть таблицы обычно не имели бы никакого взаимодействия.

Как только появляется крошечная панель, потому что я наведите плавающий элемент div, я пытаюсь прокрутить его, но он не работает, потому что он исчезает, когда я пытаюсь прокрутить его в «основном» элементе div. Я пытаюсь исправить это, изменив положение, но это не работает. Но я поставил top: 10% на tinybar и добавил тег paragraphe с нижним отступом 100px, чтобы посмотреть, что произойдет, если этот маленький бар окажется вне основного div: и это работает! Крошечная полоса прокрутки может работать только из основного div.

Итак, мой вопрос, как это исправить? Я хочу прокрутить крошечную панель, даже если моя мышь находится над основным делением.

HTML:

<p id="zola" style="padding-bottom: 100px">  <p>
<div class="wrapper_mobile" id="w_mob" onscroll="move_scrollbar_mobile()">
    <div class="child_mobile" id="w_mob_child">

    </div>
</div>

<div class="wrapper_top" id="w_top" onscroll="move_scrollbar_top()">
    <div class="child_top" id="w_top_child">

    </div>
</div>

<div id="main" style="position: relative" onmouseout="hide_scroll_mob()">

    <div class="wrapper_table" id="w_tab" onscroll="move_scrollbar_table()">
        <div class="wrapper_float" id="w_flo" onmouseover="disp_scroll_mob()">

        </div>
        <table class="search_table" id="w_tab_child">
            <tbody>
                <tr>
                    <th>Col1</th>
                    <th>Col2</th>
                    <th>Col3</th>
                    <th>Col4</th>
                    <th>Col5</th>
                    <th>Col6</th>
                    <th>Col7</th>
                </tr>
            </tbody>
        </table>
    </div>

</div>

CSS:

.wrapper_top, .wrapper_table{
    width: 300px;
     overflow-x: scroll;
     overflow-y:hidden;
}
 .wrapper_mobile{
    position: fixed;
     width: 100px;
     height: 50px;
   top: 10%;
     overflow-x: scroll;
     overflow-y: hidden;
     display: none;
     padding: 10px;
     background-color: red;
   z-index: 2;
   padding-bottom: 10px;
}

 .wrapper_float {
    width: 100%;
    height: 90%;
    top: 10%;
    position: relative;
    background-color: #88FF88;
   z-index: 1;
}

 .wrapper_top{
    height: 20px;
}
 .wrapper_table{
    height: 200px;
}
 .child_top {
    width:1000px;
     height: 20px;
}

 .child_mobile {
     width:300px;
     height: 20px;
}
 .search_table{
     table-layout: fixed;
}
 th{
     font-size:15px;
     background:#66C2E0;
}
 th {
     min-width: 200px;
}
#main {
  height: 500px;
  border: 1px solid red;
}

JS:

let w_mob_len = getComputedStyle(document.getElementById('w_mob_child'), null).width.replace("px", "") - getComputedStyle(document.getElementById('w_mob'), null).width.replace("px", "");
let w_top_len = getComputedStyle(document.getElementById('w_top_child'), null).width.replace("px", "") - getComputedStyle(document.getElementById('w_top'), null).width.replace("px", "");
let w_tab_len = getComputedStyle(document.getElementById('w_tab_child'), null).width.replace("px", "") - getComputedStyle(document.getElementById('w_tab'), null).width.replace("px", "");

function move_scrollbar_mobile(){
    let wrap_mob = document.getElementById("w_mob");
    let wrap_top = document.getElementById("w_top");
    let wrap_tab = document.getElementById("w_tab");
    wrap_top.scrollLeft = wrap_mob.scrollLeft * w_top_len/w_mob_len;
    wrap_tab.scrollLeft = wrap_mob.scrollLeft * w_tab_len/w_mob_len;
}

function move_scrollbar_top(){
    let wrap_mob = document.getElementById("w_mob");
    let wrap_top = document.getElementById("w_top");
    let wrap_tab = document.getElementById("w_tab");
    wrap_mob.scrollLeft = wrap_top.scrollLeft * w_mob_len/w_top_len;
    wrap_tab.scrollLeft = wrap_top.scrollLeft * w_tab_len/w_top_len;
}

function move_scrollbar_table(){
    let wrap_mob = document.getElementById("w_mob");
    let wrap_top = document.getElementById("w_top");
    let wrap_tab = document.getElementById("w_tab");
    wrap_mob.scrollLeft = wrap_tab.scrollLeft * w_mob_len/w_tab_len;
    wrap_top.scrollLeft = wrap_tab.scrollLeft * w_top_len/w_tab_len;
}

function disp_scroll_mob(){
    document.getElementById("w_mob").style.display = "inline-block";
}

function hide_scroll_mob(){
    document.getElementById("w_mob").style.display = "none";
}

function over_w3(){
    document.getElementById("w_mob").style.position = "absolute";
}