Почему полоса прокрутки не достигает конца, когда она связана с другой полосой прокрутки по формуле javascript?

Question

На самом деле я работаю над кодом с несколькими полосами прокрутки, и все они связаны, поэтому, если вы переместите одну из них, остальные 2 будут двигаться пропорционально, я сказал пропорционально, потому что они не имеют одинаковую ширину. Это довольно интересно, но работает не очень хорошо, потому что иногда (всегда пока) скроллер не достигает конца полосы прокрутки ...

Поэтому мой вопрос: как я могу изменить свой код так, чтобы достичь конца полосы прокрутки с помощью скроллера? PS: вам нужно навести зеленый div, чтобы отобразить третью полосу прокрутки. Подсказки: я думаю, что источник проблемы напрямую связан с функциями, которые связывают полосы прокрутки между ними, но я не могу понять, что с ними не так ...

Вот код:

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() {
  let w_flo = document.getElementById("w_flo");
  w_flo.addEventListener("mouseleave", function() {
    document.getElementById("w_mob").style.display = "none";

  });
}

function disp_scroll_mob_alt() {
  let w_mob = document.getElementById("w_mob");
  w_mob.addEventListener("mouseenter", function() {
    document.getElementById("w_mob").style.display = "inline-block";
  })
}

.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: 60%;
  top: 20%;
  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;
}

<div class="wrapper_mobile" id="w_mob" onscroll="move_scrollbar_mobile()" onmouseover="">
  <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 class="wrapper_table" id="w_tab" onscroll="move_scrollbar_table()" onmouseout="hide_scroll_mob()">
  <div class="wrapper_float" id="w_flo" onmouseover="disp_scroll_mob()" onmouseout="disp_scroll_mob_alt()">

  </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>

Answer 1

Я думаю, что основная проблема в том, что вы запускаете события прокрутки для всех трех делителей и в зависимости от того, какой из них вызывается последним, это повлияет на конечную позицию всех делителей.

Я попытался добавить небольшой задержка ниже, это не производственный код, но он должен дать вам представление о том, как уменьшить риск.

const wrap_mob = document.getElementById("w_mob");
const wrap_top = document.getElementById("w_top");
const wrap_tab = document.getElementById("w_tab");

let lastScrollMob, lastScrollTop, lastScrollTable = 0;
let scrolling = false;
wrap_mob.addEventListener('scroll', function(e) {
  lastScrollMob = wrap_mob.scrollLeft;
  if (!scrolling) {
    window.requestAnimationFrame(function() {
      scrollMobile(lastScrollMob);
      scrolling = false;
    });
    scrolling = true;
  }
});
wrap_top.addEventListener('scroll', function(e) {
  lastScrollTop = wrap_top.scrollLeft;
  if (!scrolling) {
    window.requestAnimationFrame(function() {
      scrollTop(lastScrollTop);
      scrolling = false;
    });
    scrolling = true;
  }
});
wrap_tab.addEventListener('scroll', function(e) {
  lastScrollTable = wrap_tab.scrollLeft;
  if (!scrolling) {
    window.requestAnimationFrame(function() {
      scrollTable(lastScrollTable);
      scrolling = false;
    });
    scrolling = true;
  }
});

function scrollMobile (amount) {
  let percent = (amount / w_mob_len) * 100;
  wrap_top.scrollLeft = (w_top_len / 100) * percent;
  wrap_tab.scrollLeft = (w_tab_len / 100) * percent;
}
function scrollTop (amount) {
  let percent = (amount / w_top_len) * 100;
  wrap_mob.scrollLeft = (w_mob_len / 100) * percent;
  wrap_tab.scrollLeft = (w_tab_len / 100) * percent;
}
function scrollTable (amount) {
  let percent = (amount / w_tab_len) * 100;
  wrap_mob.scrollLeft = (w_mob_len / 100) * percent;
  wrap_top.scrollLeft = (w_top_len / 100) * percent;
}

let w_mob_len = getComputedStyle(document.getElementById('w_mob_child'), null).width.replace("px", "") - getComputedStyle(wrap_mob, null).width.replace("px", "");

let w_top_len = getComputedStyle(document.getElementById('w_top_child'), null).width.replace("px", "") - getComputedStyle(wrap_top, null).width.replace("px", "");

let w_tab_len = getComputedStyle(document.getElementById('w_tab_child'), null).width.replace("px", "") - getComputedStyle(wrap_tab, null).width.replace("px", "");

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

function hide_scroll_mob() {
  let w_flo = document.getElementById("w_flo");
  w_flo.addEventListener("mouseleave", function() {
    console.log("hide");
    document.getElementById("w_mob").style.display = "none";
  });
}

function disp_scroll_mob_alt() {
  let w_mob = document.getElementById("w_mob");
  w_mob.addEventListener("mouseenter", function() {
    document.getElementById("w_mob").style.display = "inline-block";
  })
}

.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;

  background-color: red;
  z-index: 2;
  padding-bottom: 10px;
}

.wrapper_float {
  width: 100%;
  height: 60%;
  top: 20%;
  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;
}

<div class="wrapper_mobile" id="w_mob">
  <div class="child_mobile" id="w_mob_child"></div>
</div>

<div class="wrapper_top" id="w_top">
  <div class="child_top" id="w_top_child"></div>
</div>

<div class="wrapper_table" id="w_tab" onmouseout="hide_scroll_mob()">
  <div class="wrapper_float" id="w_flo" onmouseover="disp_scroll_mob()" onmouseout="disp_scroll_mob_alt()">
  </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>