Problem with LocalScroll when using on scrollable elements

I've noticed that if you use the LocalScroll plugin with scrollable elements and you use the scroll in those elements, the behaviour sometimes looks like there's a bug.

URL with the example of the problem: http://jsfiddle.net/oms02/s53h7gko/26/

$.localScroll({
    target: '#wrapper',
    axis: 'xy',
                queue:true,
                duration:1000,
                hash:false,
                lazy:true,
    onBefore:function( e, anchor, $target ){
                },
                onAfter:function( anchor, settings ){
                }
});

#wrapper {
  border:3px solid black;
  width:400px;
  height:300px;
  margin: 10px auto 0;
  overflow:hidden;
}

#div1 {
  width:4000px;height:500px;
  overflow-y:auto;overflow-x:auto;
  border:1px solid red;
  margin:5px 0 0 5px;
}

#div2 {
  width:4000px;height:500px;
  overflow-y:auto;overflow-x:auto;
  border:1px solid red;
  margin:5px 0 0 5px;
}

.box {
  float:left;
  border:1px solid green;
  width:200px;height:600px;
}

.box h2 {
  margin:0 auto;
  text-align:center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js?1.4.11"></script>
<script src="http://demos.flesler.com/jquery/localScroll/js/jquery.localscroll-min.js?1.3.4"></script>
<a href="#section2.1">go to section 2.1</a>
<br>
<a href="#section2.2">go to section 2.2</a>

<div id="wrapper">
  <div id="div1">
    <div class="box" id="section1.1">
      <h2>content 1.1</h2>
    </div>
    <div class="box" id="section1.2">
      <h2>content 1.2</h2>
    </div>
    <div class="box" id="section1.3">
      <h2>content 1.3</h2>
    </div>
    <div class="box" id="section1.4">
      <h2>content 1.4</h2>
    </div>
    <div class="box" id="section1.5">
      <h2>content 1.5</h2>
    </div>
    <div class="box" id="section1.6">
      <h2>content 1.6</h2>
    </div>
  </div>
  <div id="div2">
    <div class="box" id="section2.1">
      <h2>content 2.1</h2>
    </div>
    <div class="box" id="section2.2">
      <h2>content 2.2</h2>
    </div>
    <div class="box" id="section2.3">
      <h2>content 2.3</h2>
    </div>
    <div class="box" id="section2.4">
      <h2>content 2.4</h2>
    </div>
    <div class="box" id="section2.5">
      <h2>content 2.5</h2>
    </div>
    <div class="box" id="section2.6">
      <h2>content 2.6</h2>
    </div>
  </div>
</div>

Scenario:

There's a wrapper (small size) which has inside two large scrollable divs (once upon the other) with six floated elements with a height bigger than their parents so that the user can use the scroll. In resume, the "map" look like this:

| 1.1 | 1.2 | 1.3 | 1.4 | 1.5 | 1.6 |

| 2.1 | 2.2 | 2.3 | 2.4 | 2.5 | 2.6 |

Steps:

1. Click on the link "go to section 2.1". This correctly leads you to that div.
2. Scroll on the section and before you click on the other link, make sure the div#section2.1 is not on the top (scroll). In this case, you won't be able to see the text of the box.
3. Click on the link "go to section 2.2": on the second movement (on the y-axis) it scrolls on the whole wrapper, which is wrong because the scroll should happen on the #div2. The text of the boxes looks like hidden. If you scroll on the boxes of section 2, then you'll see the content, but you can see that the plugin didn't bring you to the correct position.

I've tried almost everything but all failed: 1. Set a margin between both elements. 2. Insert a third div between them (position relative and lower z-index). 3. Set the position of the scrolled div to the top before the movement begins.

The result is always the same: both divs looks like they both collision/crush

Any idea? Thanks in advance!

from Problem with LocalScroll when using on scrollable elements