相对容器中的VelocityJS滚动错误

Question

速度在我的部分项目中工作，但我正在经历的问题在JSFiddle中是可复制的(下面的链接)，我认为它可能与项目的GitHub页面上的问题#770有某种联系。

(注意:我有链接到下面的这篇文章和其他文章，但是我的声誉没有超过2个链接，所以我很抱歉不得不查阅这些链接。)

我想知道是否有人可以：

• 确认这是一个已知的错误，
• 请看这个问题的解决办法，
• 在我的实现中找到错误，或者
• 提供另一种解决方案。

我正在构建一个实现屏幕外推送菜单的网站，其中整个内容被包装在一个相对的DIV中，该DIV使用CSS转换来显示菜单。有几个级别的相对定位DIV模仿固定定位我的网站标题(这是必要的，包装在推菜单DIV)。

推送菜单是改编自Codrops游乐场文章(在Tympanus.net上搜索“多级推送菜单”)。有一个演示链接从这篇文章。文章中还提供了一个链接，链接到元素的伪固定定位和CSS转换(半程)。

我的开发站点上的菜单按预期工作。我实现了从一些菜单项到内部页面的滚动速度，这也很好(从页面顶部滚动)。

然而，我也想使用速度滚动在页面中从固定位置的侧边栏顶部，允许用户点击一个章节标题自动滚动到该部分。不幸的是，侧边栏链接只有当页面被滚动到最上面时才能工作。从任何其他滚动位置，链接不能正常工作。

如果页面向下滚动，单击任何链接只会进一步向下滚动页面，即使在单击事件中请求的部分高于当前滚动位置。

这种行为最好出现在这个Fiddle：http://jsfiddle.net/Josefism/j4dLhssc/中。

基本站点结构

<div class="site-container">
  <div class="menu-pusher">
    <div class="scroller">
      <div class="scroller-inner">
        <div class="site-inner">
          <div class="content-sidebar-wrap">
            <main class="content">
              <article class="page">
                <div class="entry-content">
                  <div id="section-1" class="section-1">
                    <p>Spicy jalapeno bacon ipsum.</p>    
                    <p>Cupim aliqua culpa bacon.</p>    
                    <p>Aliqua irure qui chicken.</p>
                  </div><!-- End Section 1 -->

                  <div id="section-2" class="section-2">
                    <p>Spicy jalapeno bacon ipsum.</p>    
                    <p>Cupim aliqua culpa bacon.</p>    
                    <p>Aliqua irure qui chicken.</p>
                  </div><!-- End Section 2 -->

                  <div id="section-3" class="section-3">
                    <p>Spicy jalapeno bacon ipsum.</p>    
                    <p>Cupim aliqua culpa bacon.</p>    
                    <p>Aliqua irure qui chicken.</p>
                  </div><!-- End Section 3 -->

                  <div id="section-4" class="section-4">
                    <p>Spicy jalapeno bacon ipsum.</p>    
                    <p>Cupim aliqua culpa bacon.</p>    
                    <p>Aliqua irure qui chicken.</p>
                  </div><!-- End Section 4 -->

                </div><!-- End Entry Content -->
              </article>
            </main>
            <aside class="sidebar">
              <section class="widget">
                <div class="widget-wrap">
                  <div class="text-widget">
                    <ul class="sidebar-menu">
                      <li class="section-1-link">Section 1</li>
                      <li class="section-2-link">Section 2</li>
                      <li class="section-3-link">Section 3</li>
                      <li class="section-4-link">Section 4</li>
                    </ul>
                  </div><!-- End Text Widget -->
                </div><!-- End Widget Wrap -->
              </section>
            </aside>
          </div><!-- End Content Sidebar Wrap -->
        </div><!-- End Site Inner -->
      </div><!-- End Scroller Inner -->
    </div><!-- End Scroller -->
  </div><!-- End Menu Pusher -->
</div><!-- End Site Container -->

CSS (仅为适应问题的JSFiddle复制而修改)

body {
  font-family: Helvetica;
  width: 95%;
  margin: 0 auto;
  color: white;
  background: red;
  height: 100%;
  overflow: hidden;
}

.site-container {
  position: relative;
  overflow: hidden;
  height: 100%;
  margin-top: 90px;
}

.menu-pusher {
  position: relative;
  left: 0;
  height: 100%;
}

.scroller {
  position: relative;
  overflow-y: scroll;
  height: 400px;
}

.scroller-inner {
  position: relative;
}

.site-inner {
  position: relative;
}

main {
  display: block;
}

.content {
  float: right;
}

.content-sidebar-wrap .content {
  width: 100%;
}

.sidebar {
  float: left;
  width: 100%;
  top: 0px;
  position: fixed;
  display: block;
}

.sidebar .widget {
  padding: 20px;
  display: block;
  background-color: #CCC;
  color: #FFF;
}

.sidebar-menu {
  text-align: center;
}

.sidebar-menu li {
  list-style-type: none;
  padding: 0 1%;
  cursor: pointer;
  display: inline-block;
}

.sidebar-menu li:hover,
.sidebar-menu li.hovered {
  color: green;
}

.page {
  display: block;
}

.section-1 {
  background-color: #ddd;
  color: #000;
  padding: 20px 20px 100px 20px;
}

.section-2 {
  background-color: #FFF;
  color: #000;
  padding: 20px 20px 100px 20px;
}

.section-3 {
  background-color: #AAA;
  color: #FFF;
  padding: 20px 20px 100px 20px;
}

.section-4 {
  background-color: #555;
  color: #FFF;
  padding: 20px 20px 100px 20px;
  margin-bottom: 100px;
}

jQuery速度实现(不包括菜单项中的速度实现，因为这些实现已经起作用了)。

$(document).ready(function(e) {

  // Add Velocity scrolling to the internal section sidebar links
  $(".section-1-link").on("click", function() {
    $("#section-1").velocity("stop", true).velocity("scroll", {
      container: $(".scroller"),
      duration: 1000,
      easing: "easeInOutSine",
      delay: 300,
      offset: 1
    });
  });
  $(".section-2-link").on("click", function() {
    $("#section-2").velocity("stop", true).velocity("scroll", {
      container: $(".scroller"),
      duration: 1000,
      easing: "easeInOutSine",
      delay: 300,
      offset: 1
    });
  });
  $(".section-3-link").on("click", function() {
    $("#section-3").velocity("stop", true).velocity("scroll", {
      container: $(".scroller"),
      duration: 1000,
      easing: "easeInOutSine",
      delay: 300,
      offset: 1
    });
  });
  $(".section-4-link").on("click", function() {
    $("#section-4").velocity("stop", true).velocity("scroll", {
      container: $(".scroller"),
      duration: 1000,
      easing: "easeInOutSine",
      delay: 300,
      offset: 1
    });
  });

  // Callback to section menu in primary sidebar to indicate scroll position
  $(".scroller").on("scroll", function() {
    var scrollerTop = $(".scroller").scrollTop();
    var section1TopDist = $("#section-1").offset().top;
    var section2TopDist = $("#section-2").offset().top;
    var section3TopDist = $("#section-3").offset().top;
    var section4TopDist = $("#section-4").offset().top;
    if (section4TopDist < 90) {
      $(".section-2-link, .section-3-link, .section-1-link").removeClass("hovered");
      $(".section-4-link").addClass("hovered");
    } else if (section3TopDist < 90) {
      $(".section-2-link, .section-1-link, .section-4-link").removeClass("hovered");
      $(".section-3-link").addClass("hovered");
    } else if (section2TopDist < 90) {
      $(".section-1-link, .section-3-link, .section-4-link").removeClass("hovered");
      $(".section-2-link").addClass("hovered");
    } else if (section1TopDist < 90) {
      $(".section-2-link, .section-3-link, .section-4-link").removeClass("hovered");
      $(".section-1-link").addClass("hovered");
    } else {
      $(".section-1-link, .section-2-link, .section-3-link, .section-4-link").removeClass("hovered");
    }
  });

});

Answer 1

嗯，经过一些测试和故障排除，我找出了是什么导致了我的问题。如果其他使用Velocity.js的人在包含元素内滚动遇到类似的问题，我将在这里发布我的解决方案，作为故障排除参考。

正如下面代码块中的注释所指出的，问题是"scrollPositionCurrent“被添加到新的滚动位置，并抛出返回的总数。将其从计算中移除对我来说很有帮助，现在在包含元素中滚动可以像预期的那样工作。

此后，我在其他站点中使用了我修改过的Velocity.js文件来滚动整个页面，没有包含任何元素，这也是正确的。

下面的代码块来自于几天前(2017年10月中旬) Velocity.js on GitHub当前版本的第3171-3205行。

原始代码仍然存在于代码片段中以供参考，但已被注释掉。

/* Scroll also uniquely takes an optional "container" option, which indicates the parent element that should be scrolled --
as opposed to the browser window itself. This is useful for scrolling toward an element that's inside an overflowing parent element. */
if (opts.container) {
    /* Ensure that either a jQuery object or a raw DOM element was passed in. */
    if (Type.isWrapped(opts.container) || Type.isNode(opts.container)) {
        console.log("GOT IT!");
        /* Extract the raw DOM element from the jQuery wrapper. */
        opts.container = opts.container[0] || opts.container;
        /* Note: Unlike other properties in Velocity, the browser's scroll position is never cached since it so frequently changes
         (due to the user's natural interaction with the page). */
        scrollPositionCurrent = opts.container["scroll" + scrollDirection]; /* GET */

        /* $.position() values are relative to the container's currently viewable area (without taking into account the container's true dimensions
         -- say, for example, if the container was not overflowing). Thus, the scroll end value is the sum of the child element's position *and*
         the scroll container's current scroll position. */
        /* scrollPositionEnd = (scrollPositionCurrent + $(element).position()[scrollDirection.toLowerCase()]) + scrollOffset; */ /* GET */
        /* CORRECTION - Applied by Josef Cook 
           Scroll position of element within a containing element was incorrect. Adding current scroll position blows out the total. 
           Had to remove current scroll position addition (commented out above) to make this work correctly. */
        scrollPositionEnd = ($(element).position()[scrollDirection.toLowerCase()]) + scrollOffset;
        /* If a value other than a jQuery object or a raw DOM element was passed in, default to null so that this option is ignored. */
    } else {
        opts.container = null;
    }
} else {
    /* If the window itself is being scrolled -- not a containing element -- perform a live scroll position lookup using
     the appropriate cached property names (which differ based on browser type). */
    scrollPositionCurrent = Velocity.State.scrollAnchor[Velocity.State["scrollProperty" + scrollDirection]]; /* GET */
    /* When scrolling the browser window, cache the alternate axis's current value since window.scrollTo() doesn't let us change only one value at a time. */
    scrollPositionCurrentAlternate = Velocity.State.scrollAnchor[Velocity.State["scrollProperty" + (scrollDirection === "Left" ? "Top" : "Left")]]; /* GET */

    /* Unlike $.position(), $.offset() values are relative to the browser window's true dimensions -- not merely its currently viewable area --
     and therefore end values do not need to be compounded onto current values. */
    scrollPositionEnd = $(element).offset()[scrollDirection.toLowerCase()] + scrollOffset; /* GET */
}