視口高度差會中斷滾動事件

Question

我希望在某些列進入視口后為其添加CSS效果。 我從另一篇SO帖子中得到了答案： 請參見此處 。 原始文件在wordpress上，我認為這並不重要。 jQuery可以按預期工作，但是，在進行了一些故障排除后，似乎從另一個SO帖子中得到了答案， elemTop < viewportBottom的條件永遠不會成真，事件也不會觸發。

<div class="content"></div>
    <div class="wrapper">
      <div class="column first-column">
        <p><strong>title</strong></p>
        <p>lorem.</p>
      </div>
      <div class="column second-column">
        <p><strong>title</strong></p>
        <p>ipsum.</p>
      </div>
      <div class="column third-column">
        <p><strong>title</strong></p>
        <p>dolor.</p>
    </div>
</div>

至於codepen，如果我將content的高度設置為height: 84vh; 它完美地工作。 更高的破壞功能。 我本地的開發項目有不同的規模，根本無法使用。

另外，我正在使用Chrome。 如果我沒有記錯的話，Firefox似乎運行良好。

我看過各種解決方案，包括：

• 總是顯示父母（父母永遠不會隱藏）
• 設置overflow: auto （我不確定在哪一個上，但是我已經嘗試過全部設置）
• 從一開始就讓有問題的元素顯示出來（這首先破壞了它的全部目的）

以上解決方案均無效。 這是我的CodePen 。

這是冗長的JS和CSS：

function isElementInViewport(elem) {
  var $elem = $(elem);
  // Get the scroll position of the page.
  var scrollElem =
    navigator.userAgent.toLowerCase().indexOf("webkit") != -1 ? "body" : "html";
  var viewportTop = $(scrollElem).scrollTop();

  console.log(viewportTop);
  var viewportBottom = viewportTop + $(window).height();

  // Get the position of the element on the page.
  var elemTop = Math.round($elem.offset().top);
  var elemBottom = elemTop + $elem.height();

  return elemTop < viewportBottom && elemBottom > viewportTop;
}

// Check if it's time to start the animation.
function checkAnimation() {
  var $elem = $(".first-column");
  var $elemTwo = $(".second-column");
  var $elemThree = $(".third-column");

  // If the animation has already been started
  if (
    $elem.hasClass("first-column-start") ||
    $elemTwo.hasClass("second-column-start") ||
    $elemThree.hasClass("third-column-start")
  )
    return;

  if (isElementInViewport($elem)) {
    // Start the animation
    $elem.addClass("first-column-start");
    $elemTwo.addClass("second-column-start");
    $elemThree.addClass("third-column-start");
  }
}

// Capture scroll events
$(window).scroll(function() {
  checkAnimation();
});

CSS只是摘錄：

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.column {
  background: #e2e3e5;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.26);
  margin: 0 32px 14px 0;
  max-width: 250px;
  padding: 1rem;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTop {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(20%, 0, 0);
    transform: translate3d(20%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.first-column-start {
  -webkit-animation: fadeInLeft 0.8s;
  -moz-animation: fadeInLeft 0.8s;
  -ms-animation: fadeInLeft 0.8s;
  -o-animation: fadeInLeft 0.8s;
  animation: fadeInLeft 0.8s;
}

.second-column-start {
  -webkit-animation: fadeInTop 0.8s;
  -moz-animation: fadeInTop 0.8s;
  -ms-animation: fadeInTop 0.8s;
  -o-animation: fadeInTop 0.8s;
  animation: fadeInTop 0.8s;
}

.third-column-start {
  -webkit-animation: fadeInRight 0.8s;
  -moz-animation: fadeInRight 0.8s;
  -ms-animation: fadeInRight 0.8s;
  -o-animation: fadeInRight 0.8s;
  animation: fadeInRight 0.8s;
}

我該如何工作？ 謝謝

Answer 1

我會用var viewportTop = $(document).scrollTop(); 要么

var scrollElem = navigator.userAgent.toLowerCase().indexOf("webkit") != -1 ? document : "html";`

滾動時“ body”似乎確實返回0（坦白地說，我目前無法提供有關其原因的適當解釋）

另外，最好在外部范圍的Jquery中維護對查詢的引用。

var $elem = $(".first-column");
var $elemTwo = $(".second-column");
var $elemThree = $(".third-column");

function isElementInViewport(elem) {
  // Get the scroll position of the page.
  var scrollElem =
    navigator.userAgent.toLowerCase().indexOf("webkit") != -1 ? document : "html";

  var viewportTop = $(scrollElem).scrollTop();

  console.log(viewportTop);
  var viewportBottom = viewportTop + $(window).height();

  // Get the position of the element on the page.
  var elemTop = Math.round($elem.offset().top);
  var elemBottom = elemTop + $elem.height();

  return elemTop < viewportBottom && elemBottom > viewportTop;
}

// Check if it's time to start the animation.
function checkAnimation() {

  // If the animation has already been started
  if (
    $elem.hasClass("first-column-start") ||
    $elemTwo.hasClass("second-column-start") ||
    $elemThree.hasClass("third-column-start")
  )
    return;


  if (isElementInViewport($elem)) {
    console.log("Hi");
    // Start the animation
    $elem.addClass("first-column-start");
    $elemTwo.addClass("second-column-start");
    $elemThree.addClass("third-column-start");
  }
}

// Capture scroll events
$(window).scroll(function() {
  checkAnimation();
});