时间戳

首页 > 解决方案 > 在滚动js上执行功能

javascript - 在滚动js上执行功能

问题描述

scroll请告诉我当文档等于#footer元素的位置时如何执行该功能？

$(document).on('scroll', function() {
  var s = $(this).scrollTop();
  var scroll_footer = $('#footer').position().top;
  $("#console").text(s + " " + scroll_footer);
  if (s >= scroll_footer) {
    console.log("load");
  }
});
#block {
  background: red;
  width: 250px;
}

#child_block {
  padding-top: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.child {
  width: 100px;
  height: 100px;
  background: blue;
  margin: 15px 10px 10px;
  15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

#footer {
  width: 100%;
  height: 10px;
  background: gray;
}

#console {
  position: fixed;
  left: 300px;
  top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="block">
  <div id="child_block">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
  </div>
  <div id="footer"></div>
</div>
<div id="console"></div>

标签： javascripthtmljquerycss

解决方案

我pageHeight在您的 JS 中添加了一个变量，因此您现在正在计算以像素为单位的窗口高度 + 客户端滚动的量。当这两个值 >=scroll_footer时，您的函数可以执行。

    $(document).on('scroll', function() {
  var s = $(this).scrollTop();
  var pageHeight = window.innerHeight
  var scroll_footer = $('#footer').position().top;
  $("#console").text((s+pageHeight) + " " + scroll_footer);
  if (s+pageHeight >= scroll_footer) {
    console.log("load");
  }
});

这是一个有效的代码笔： https ://codepen.io/paulmartin91/pen/dyNwJmp ?editors=1111

推荐阅读