Question

我正在尝试针对以下情况找到更好的解决方案：

我有一个父级元素，该元素具有动态尺寸，位置和隐藏的溢出，其中包含一个可滚动的 child 。当用户向下滚动到子项的末尾时，父项会减小高度，而子项会通过动画滚动跟随更改。以另一种方式（向上滚动），跟随 parent 扩展高度并滚动 child 。

这是Fiddle，它演示了我尝试过的内容：

$(".scroller").on("scroll", function() {
  var sh = this.scrollHeight;
  var oh = this.offsetHeight;

  $("span").html(this.scrollTop);

  if (sh - oh - this.scrollTop < 40 && !$(".element").hasClass("reduce")) {
    $(".element").removeClass("expand");
    $(".element").addClass("reduce");
  } else if (sh - oh - this.scrollTop < 40 &&
    $(".element").hasClass("reduce") && !$(".element").hasClass("calm")) {
    $(".element").one("animationstart webkitAnimationStart oAnimationStart MSAnimationStart", function() {
      $(".scroller").animate({
        scrollTop: sh - oh + 40
      }, 300, "linear");
      $(".element").addClass("calm");
    });
  } else if (sh - oh - this.scrollTop > 40 &&
    $(".element").hasClass("reduce") && $(".element").hasClass("calm")) {
    $(".element").removeClass("reduce");
    $(".element").addClass("expand");

    $(".element").one("animationstart webkitAnimationStart oAnimationStart MSAnimationStart", function() {
      $(".scroller").animate({
        scrollTop: sh - oh - 150
      }, 300, "linear");
      $(".element").removeClass("calm");
    });
  }
});

* {
  box-sizing: border-box;
}

.wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background: blue;
}

.element {
  font-size: 20px;
  line-height: 2em;
  width: calc(100% - 4em);
  height: calc(100% - 2em);
  transform: translate( -50%, calc(-50% + 1em));
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  background: white;
}

.scroller {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 1rem;
  overflow: auto;
}

.reduce {
  animation: reduceSize 300ms 1 ease forwards;
}

.expand {
  animation: expandSize 300ms 1 linear forwards;
}

@keyframes reduceSize {
  0% {
    transform: translate( -50%, calc(-50% + 1em));
    height: calc(100% - 2em);
  }
  100% {
    transform: translate( -50%, -50%);
    height: calc(100% - 4em);
  }
}

@keyframes expandSize {
  0% {
    transform: translate( -50%, -50%);
    height: calc(100% - 4em);
  }
  100% {
    transform: translate( -50%, calc(-50% + 1em));
    height: calc(100% - 2em);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  <span></span>
  <div class="element">
    <div class="scroller">
      Mr. Worf, you do remember how to fire phasers? Could someone survive inside a transporter buffer for 75 years? Computer, belay that order. The look in your eyes, I recognize it. You used to have it for me. For an android with no feelings, he sure managed
      to evoke them in others. The game's not big enough unless it scares you a little. Did you come here for something in particular or just general Riker-bashing? My oath is between Captain Kargan and myself. Your only concern is with how you obey my
      orders. Or do you prefer the rank of prisoner to that of lieutenant? The Federation's gone; the Borg is everywhere! Some days you get the bear, and some days the bear gets you. Maybe if we felt any human loss as keenly as we feel one of those close
      to us, human history would be far less bloody. Travel time to the nearest starbase? The Enterprise computer system is controlled by three primary main processor cores, cross-linked with a redundant melacortz ramistat, fourteen kiloquad interface
      modules. Sure. You'd be surprised how far a hug goes with Geordi, or Worf. Worf, It's better than music. It's jazz. They were just sucked into space. I've had twelve years to think about it. And if I had it to do over again, I would have grabbed
      the phaser and pointed it at you instead of them. Mr. Worf, you sound like a man who's asking his friend if he can start dating his sister. I will obey your orders. I will serve this ship as First Officer. And in an attack against the Enterprise,
      I will die with this crew. But I will not break my oath of loyalty to Starfleet. We know you're dealing in stolen ore. But I wanna talk about the assassination attempt on Lieutenant Worf. In all trust, there is the possibility for betrayal. When
      has justice ever been as simple as a rule book? Wait a minute - you've been declared dead. You can't give orders around here. And blowing into maximum warp speed, you appeared for an instant to be in two places at once. Your shields were failing,
      sir. How long can two people talk about nothing? Your head is not an artifact! Well, I'll say this for him - he's sure of himself. Wouldn't that bring about chaos? When has justice ever been as simple as a rule book? We finished our first sensor
      sweep of the neutral zone. I'll alert the crew. What's a knock-out like you doing in a computer-generated gin joint like this? Mr. Crusher, ready a collision course with the Borg ship. Shields up! Rrrrred alert! Yesterday I did not know how to eat
      gagh. Ensign Babyface! Not if I weaken first. I'd like to think that I haven't changed those things, sir
    </div>
  </div>
</div>

它的问题是向上滚动时很笨拙，可以通过快速滚动顶部和底部来进行调试。我正在寻找一种更平滑，更防弹的方式来处理这种情况，而我却缺少了一些东西。

PS：尽管现在它在某些位置上具有固定的滚动和大小值，但是它将整体使用动态变量并在不同的屏幕和元素大小上工作，因此在渲染之前无法知道确切的大小。

谢谢您的时间

编辑：正如Anthony指出的那样，该代码并非在所有地方都有效，它可以在最新的Firefox上运行，但不能在较旧的版本上使用，而不能在Chrome上运行（未在Safari上测试）。它应该在支持所提供的CSS的浏览器上工作。

使用jquery动画化元素中的滚动元素，同时使用CSS动画更改元素大小

0 个答案: