我对页面上的元素进行了排列 - 通过 CMS 控制位置，它为每个元素指定了宽度、顶部位置、左侧位置、z-index 和“速度”。

速度用于使用 JS 创建视差效果。它采用它的“速度”并通过 window.pageYOffset 进行计算 - 如果速度小于 0，则它将 window.pageYOffset 除以速度，如果速度大于大于 0 则它将 window.pageYOffset 乘以速度。然后在滚动时调整 Y 平移以提供这种“视差”效果。

这通常都很好，但当然，当您更改滚动上元素的 Y 位置时，您会在底部留下一个“间隙”(如果滚动速度与用户滚动速度匹配，则元素将位于此处)。

为了纠正这个问题，我想我会得到最底部的元素，并得到它的 getBoundingClientRect().bottom 位置并在滚动时降低容器的高度以匹配该元素的底部，以便您向下或向上滚动容器会收缩/扩展以匹配，从而消除间隙。

但是，这似乎行不通。数学/逻辑要么是错误的，要么是我遗漏了整件事。

下面是我的代码，我设置了一个 JSFiddle 来帮助可视化它。

https://jsfiddle.net/6up3vqjn/2/

// Runs on init and resize
function parallaxInit() {

  var $container = $('.parallax'),
    container = $container[0];

  var testArray = [],
    $testLastElement;

  $('.parallax > .group').each(function() {

    var $group = $(this),
      group = $group[0],
      groupBounds = group.getBoundingClientRect(),
      $lastElement,
      lastElementBoundsBottom = 0;

    $group.find('> div').each(function() {

      var $div = $(this),
        div = $div[0],
        initTop = $div.attr('data-top');

      if (initTop == 0) {
        $div.css('top', '0');
      } else {
        $div.css('top', $(window).width() / 12 * initTop - 26 + 'px');
      };

      group.removeAttribute('style');
      $group.height(group.scrollHeight).attr('data-height', group.scrollHeight);

      var divBounds = div.getBoundingClientRect();
      testArray.push(divBounds.bottom);

    });

  });

  $('.parallax > .group > div').each(function() {

    var divBottomBounds = $(this)[0].getBoundingClientRect().bottom;

    if (divBottomBounds == Math.max.apply(Math, testArray)) {
      $testLastElement = $(this);
      $(this).addClass('is--last');
    }

    var letters = "0123456789ABCDEF";
    var color = '#';
    for (var i = 0; i < 6; i++) color += letters[(Math.floor(Math.random() * 16))];
    $(this).css('background-color', color);


  });

  $container[0].style.height = $testLastElement[0].getBoundingClientRect().bottom + 'px';

}
parallaxInit();
$(window).on('resize', parallaxInit);

// Runs on scroll
function parallax() {

  var $container = $('.parallax');

  var test = 0;
  var testArray = [],
    $testLastElement;

  $('.parallax > .group').each(function() {

    var $group = $(this),
      group = $group[0],
      groupHeight = $group.attr('data-height'),
      groupBounds = group.getBoundingClientRect();

    $group.find('> div').each(function() {

      var $this = $(this),
        speed = $this.attr('data-speed');

      if (speed < 0) {
        speed = Math.abs(speed);
        var yPos = window.pageYOffset / speed;
      } else {
        var yPos = window.pageYOffset * speed;
      }
      yPos = -yPos;

      $this[0].style.transform = "translate3d(0, " + yPos + "px, 0)";

      var divBounds = $this[0].getBoundingClientRect(),
        divRelativeBounds = {};

      testArray.push(divBounds.bottom);

    });

  });


  $('.parallax > .group > div').each(function() {

    var divBottomBounds = $(this)[0].getBoundingClientRect().bottom;
    $(this).removeClass('is--last');

    if (divBottomBounds == Math.max.apply(Math, testArray)) {
      $testLastElement = $(this);
      $(this).addClass('is--last');
    }

  });

  $container[0].style.height = $testLastElement[0].getBoundingClientRect().bottom + 'px';

}
$(window).bind('scroll', parallax);

已删除容器高度计算的更新 JSFiddle:https://jsfiddle.net/ejqhvz2c/

最佳答案

我不是 100% 这正是您所追求的，但我已经停止了过度滚动和滚动到空白区域。首先我改变了事件触发的方式。因为它是一个视差，所以我将它绑定(bind)到滚轮事件而不是实际滚动，这在页面上实际有内容时实际上并不重要。然后我使用了一个名为 paralaxYOffset 的全局变量，我决定最好以 +- 50 的间隔增加平滑度并停止过度滚动我添加了一个检查以查看 .is--last y 位置 <= 0="">

事件变化:

if(e.originalEvent.deltaY  > 0){
        if($(".is--last")[0].getBoundingClientRect().y > 0){
            window.paralaxYOffset += 50;
      }
  }else{
    window.paralaxYOffset -= 50;
  }

  if(window.paralaxYOffset < 0)
    window.paralaxYOffset = 0;

为了确保一切看起来正确并删除溢出滚动条，我将 .parallax 设置为 100vh 和 overflow: hidden

我相信这会达到您的要求:)

https://jsfiddle.net/fynmtk9b/4/

关于javascript - 视差滚动——降低容器的高度以匹配变换间隙，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56480585/