在可滚动元素上使用时 LocalScroll 出现问题

Question

我注意到，如果您将 LocalScroll 插件与可滚动元素一起使用，并在这些元素中使用滚动条，有时该行为看起来像是存在错误。

URL 带问题的例子： 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>

场景：

有一个包装器（小尺寸），里面有两个大的可滚动 divs（从前）和六个浮动元素，其高度大于它们的父级，以便用户可以使用滚动。在简历中，"map" 看起来像这样：

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

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

步骤：

点击 link "go to section 2.1"。这正确地引导你到 div.
滚动该部分，然后单击另一个 link，确保 div#section2.1 不在顶部（滚动）。在这种情况下，您将看不到框内的文字。
点击 link "go to section 2.2"：在第二个动作上（在 y 轴上）它在整个包装纸上滚动，这是错误的，因为滚动应该发生在 #div2。盒子的文字看起来像是隐藏的。如果您在第 2 部分的框上滚动，那么您会看到内容，但是您可以看到插件没有将您带到正确的位置。

我几乎尝试了所有方法，但都失败了： 1. 设置两个元素之间的边距。 2. 在它们之间插入第三个 div（相对位置和较低的 z-index）。 3.在移动开始前将滚动的位置div设置到顶部

结果总是一样的：两个 div 看起来都像 collision/crush

有什么想法吗？提前致谢！

Answer 1

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.

可以使用 offset 和 onAfter 回调解决问题：

onAfter: 保存每个anchor的当前top位置，仅限第一次
偏移量：再次计算当前顶部，如果不同（参考滚动事件）return偏移量以补偿它

为了补偿滚动，您需要在偏移量回调中添加对 scrollTop 动画的调用。

    $.localScroll({
            target: '#wrapper',
            axis: 'xy',
            queue: true,
            duration: 1000,
            hash: false,
            lazy: true,
            offset: function(elem, anchor) {
                var top = anchor.offset().top + $(this.target).scrollTop() - $(this.target).offset().top;
                var startPos = anchor.data('startPos');
                if (startPos != undefined && startPos != top) {
                    startPos = {top: startPos - top, left: 0};
                }
                // in order to compensate the scroll...next line
                anchor.parent().animate({ scrollTop: 0 }, 10)
                return startPos;
            },
            onBefore: function (e, anchor, $target) {
            },
            onAfter: function (anchor, settings) {
                var startPos = anchor.data('startPos');
                if (startPos == undefined) {
                    var self = this;
                    anchor.siblings().addBack().each(function(idx, ele) {
                        var top = anchor.offset().top + $(self).scrollTop() - $(self).offset().top;
                        $(ele).data('startPos', top);
                    });
                }
            }
     });

$.localScroll({
  target: '#wrapper',
  axis: 'xy',
  queue: true,
  duration: 1000,
  hash: false,
  lazy: true,
  offset: function(elem, anchor) {
      var top = anchor.offset().top + $(this.target).scrollTop() - $(this.target).offset().top;
      var startPos = anchor.data('startPos');
      if (startPos != undefined && startPos != top) {
          startPos = {top: startPos - top, left: 0};
      }
      anchor.parent().animate({ scrollTop: 0 }, 10)
      return startPos;
  },
  onBefore: function (e, anchor, $target) {
  },
  onAfter: function (anchor, settings) {
      var startPos = anchor.data('startPos');
      if (startPos == undefined) {
          var self = this;
          anchor.siblings().addBack().each(function(idx, ele) {
              var top = anchor.offset().top + $(self).scrollTop() - $(self).offset().top;
              $(ele).data('startPos', top);
          });
      }
  }
});

#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="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.localscroll@2.0.0/jquery.localScroll.min.js"></script>

<a href="#section1.1">go to section 1.1</a>
<br>
<a href="#section1.2">go to section 1.2</a>
<br>
<a href="#section1.3">go to section 1.3</a>
<br>
<a href="#section2.1">go to section 2.1</a>
<br>
<a href="#section2.2">go to section 2.2</a>
<br>
<a href="#section2.3">go to section 2.3</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>

在可滚动元素上使用时 LocalScroll 出现问题

Problem with LocalScroll when using on scrollable elements

jquery

plugins

scroll

scrollto

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

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