Нужно подобное поведение вертикальной и горизонтальной полосы прокрутки в React

Question

У меня нет глубины ReactJs знаний, чтобы преобразовать этот дизайн в ReactJs. Я написал это в Jquery. Кто-нибудь может мне подсказать, как добиться такого же дизайна в ReactJs? Левый div, который содержит топи c для каждой строки, должен быть липким при горизонтальной прокрутке. Я не могу больше использовать библиотеку jquery. Мне нужно реализовать в чистом реагировании, используя машинопись или эмоции 10 или оба.

Спасибо.

JSFiddle ссылка для этого примера

HTML Код:

<div class="main">
  <div class="row">
  <div class="sticky">
    <div>First1</div>
    <div>First2</div>
    <div>First3</div>
    <div>First4</div>
    <div>First5</div>
    <div>First6</div>
    <div>First7</div>
    <div>First8</div>
    <div>First9</div>
    <div>First10</div>
    <div>First11</div>
    <div>First12</div>
    <div>First13</div>
    <div>First14</div>
   </div>
    <div class="content">
      <div>row content</div>
      <div>row content</div>
      <div>row content</div>
      <div>row content</div>
      <div>row content</div>
      <div>row content</div>
      <div>row content</div>
      <div>row content</div>
      <div>row content</div>
      <div>row content</div>
      <div>row content</div>
      <div>row content</div>
      <div>row content</div>
      <div>row content</div>
    </div>
        <div class="content">
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
    </div>
        <div class="content">
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
      <div>row content1</div>
    </div>
  </div>
</div>

CSS Код:

.main {
  background-color:blue;
  overflow: scroll;
  height: 200px;
  width: 400px;
}

.row {
  height: 50px;
  clear: both;
  width: 1000px;
  position: relative;
  padding-left: 150px;
  box-sizing: border-box;
}
.sticky, .content {
  float: left;
  width: 150px;
  border: 1px solid black;
}
.sticky {
  background-color: red;
  position: absolute; left: 0; top: 0;
}
.content{
  background-color: green;
}

JQuery для достижения горизонтальной полосы прокрутки, как показано на скрипка:

$('.main').scroll(function(){
    $(this).find('.sticky').css('left', $(this).scrollLeft());
});

Answer 1

js файл:

import $ from 'jquery';  
class Test extends React.Component {

      componentDidMount(){
        $('.main').scroll(function(){
        $(this).find('.sticky').css('left', $(this).scrollLeft());
        });
      }

      render() {
        return (<div className="main">
      <div className="row">
      <div className="sticky">
        <div>First1</div>
        <div>First2</div>
        <div>First3</div>
        <div>First4</div>
        <div>First5</div>
        <div>First6</div>
        <div>First7</div>
        <div>First8</div>
        <div>First9</div>
        <div>First10</div>
        <div>First11</div>
        <div>First12</div>
        <div>First13</div>
        <div>First14</div>
       </div>
        <div className="content">
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
        </div>
            <div className="content">
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
        </div>
            <div className="content">
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
        </div>
      </div>
    </div>);
      }
    }

    React.render(<Test />, document.getElementById('app'));

css файл:

.main {
  background-color:blue;
  overflow: scroll;
  height: 200px;
  width: 400px;
}

.row {
  height: 50px;
  clear: both;
  width: 1000px;
  position: relative;
  padding-left: 150px;
  box-sizing: border-box;
}
.sticky, .content {
  float: left;
  width: 150px;
  border: 1px solid black;
}
.sticky {
  background-color: red;
  position: absolute; left: 0; top: 0;
}
.content{
  background-color: green;
}

и html файл:

<div id="app">

 </app>

Я надеюсь, что это полезно для вас:)