在可滚动元素上使用 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>

场景：

有一个包装器（小尺寸），里面有两个大的可滚动 div（一个又一个），有六个浮动元素，高度大于它们的父元素，以便用户可以使用滚动。 在简历中，“地图”如下所示：

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

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

步骤：

1. 单击链接“转到第 2.1 节”。这会正确引导您到该 div。
2. 滚动该部分并在单击其他链接之前，确保 div#section2.1 不在顶部（滚动）。在这种情况下，您将无法看到该框的文字。
3. 单击链接“转到第 2.2 节”：在第二次移动时（在 y 轴上），它在整个包装上滚动，这是错误的，因为滚动应该发生在 #div2 上。框的文本看起来像是隐藏的。如果您滚动第 2 部分的框，您会看到内容，但您会看到插件没有将您带到正确的位置。

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

结果总是一样的：两个 div 看起来都像是碰撞/粉碎

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

Answer 1

框的文本看起来像是隐藏的。如果您滚动第 2 部分的框，您会看到内容，但您会看到插件没有将您带到正确的位置。

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

• onAfter：保存每个锚点的当前顶部位置，仅用于第一次
• 偏移量：再次计算当前顶部，如果不同（参考滚动事件）返回偏移量以补偿它

为了补偿滚动，您还需要在偏移回调中添加对 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>