Прокрутка колонки

Question

У меня есть 3 столбца на моей веб-странице, таких как Facebook, а также в этом примере.

https://benfrain.com/playground/scroll-test.html

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

$(function() {
  for (var i = 0; i < 20; i++) {
    $('.content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae pretium ante. Pellentesque eu quam non eros fermentum euismod. Sed turpis ligula, hendrerit at erat at, mattis commodo tortor. Sed eleifend velit interdum augue faucibus luctus. Nulla facilisi. Fusce facilisis at enim ac euismod. Vestibulum a lobortis velit. Sed ac erat ac sapien rhoncus tristique. Aliquam eget diam non justo sollicitudin egestas. Cras aliquam egestas nunc sed fermentum. Donec nec consectetur neque. Proin arcu ligula, tincidunt a augue in, dictum pharetra nisi.</p>');
  }
});

* {
  padding: 0;
  margin: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
}

#container {
  background-color: #f1f1f1;
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  bottom: 20px;
}

#inner {
  display: table;
  height: 100%;
}

#inner>div {
  display: table-cell;
}

#palette {
  min-width: 180px;
  max-width: 180px;
  width: 180px !important;
  background-color: pink;
}

#list {
  width: 55%;
  min-width: 350px;
  background-color: cyan;
}

#editor {
  width: 45%;
  min-width: 400px;
  background-color: magenta;
}

.content {
  overflow: auto;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="inner">
    <div id="palette">palette</div>
    <div id="list">
      <div class="content"></div>
    </div>
    <div id="editor">
      <div class="content"></div>
    </div>
  </div>
</div>