2つのスクロールバーをjQueryで同期させる方法

Toggle class name on click in jQuery

by interlife

HTML

<div class="scroll_area" id="js-scroll_drag_area">
  <div class="scrollinner">
   <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li></ul> 
  </div>
</div>

<div class="scroll_area scroll_area-2" id="js-scroll_drag_area-2">
  <div class="scrollinner">
  <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li></ul>
  </div>
</div>

SCSS

.scroll_area {
  margin: 2em;
  display: block;
  width: 300px;
  height: 150px;
  position: relative;
  background: yellow;
  color: brown;
  overflow: scroll;
  &.scroll_area-2 {
    background: lime;
  }
}
.scrollinner {
  padding: 2em;
  position:relative;
  width: 1200px;
  height: 1200px;
  box-sizing: border-box;
  &:after {
    position: absolute; bottom: 0;
    content: "end";
  }
}

JavaScript

/*   スクロール同期
-------------------------------------------------- */
function scroll_synch($scrollArea,$target){
  $($scrollArea).on('scroll',function(){      
    var amountX = $(this).scrollLeft();
    var amountY = $(this).scrollTop();
    console.log(amountX+"と"+amountY);
    $($target).scrollLeft(amountX);
    $($target).scrollTop(amountY);

  });;
}

scroll_synch('#js-scroll_drag_area','#js-scroll_drag_area-2');
scroll_synch('#js-scroll_drag_area-2','#js-scroll_drag_area');