如何检测可滚动 div 何时向下滚动而不是整个页面？答案

【问题标题】：How can I detect when a scrollable div is scrolled down not the whole page?如何检测可滚动 div 何时向下滚动而不是整个页面？
【发布时间】：2022-01-04 04:53:11
【问题描述】：

我有一些代码有页眉和页脚，这是一种导航，但始终存在。我在中间有一个可滚动的 div。我有它，所以我可以检测到它何时滚动到顶部而不是底部。我希望它看起来有点像 Facebook 个人资料页面，它最终会在可滚动 div 中包含更多信息。最终，我希望标题，即图像和名称消失在视线之外，并且在向上滚动时只留下名称和小圆圈图像，如果我可以让滚动检测正常工作，我可以轻松做到这一点。我希望它具有移动的感觉。

我认为这是因为我是如何设置它的，我已经尝试了各种方式来改变它而不改变它的外观。我正在使用引导程序。

我让它像这样工作，但不能与添加的 sn-p 一起工作？它是我需要检测的<div id="profile-middle" class="profile-middle">。

$(function() {
  var $win = $('#profile-middle');

  $win.scroll(function() {
    if ($win.scrollTop() == 0)
      alert('Scrolled to Page Top');
    else if ($win.height() + $win.scrollTop() ==
      $(document).height()) {
      console.log('Scrolled to Page Bottom');
    }
  });
});

.profile-head {
  transform: translateY(5rem)
}

.cover {
  background-image: url(https://images.unsplash.com/photo-1493571716545-b559a19edd14?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80);
  background-size: cover;
  background-repeat: no-repeat
}

body {
  background: #654ea3;
  background: linear-gradient(to right, #e96443, #904e95);
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;
}

#main {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

.img-rounded {
  padding: .1rem;
  border-radius: 100px!important;
}

.custom1 {
  position: relative;
  top: 3px;
  margin-right: 5px;
  line-height: 10px;
}

.profile {
  position: relative;
  top: 0;
  display: none;
  z-index: 1;
  transition: 0.3s;
}

.profile-middle {
  position: absolute;
  top: 350px;
  width: 100%;
  bottom: 20px;
  z-index: 2;
  display: none;
  overflow-y: scroll;
}

.green_icon {
  background-color: #4cd137;
  position: relative;
  left: 97px;
  top: 125px;
  height: 20px;
  width: 20px;
  border: 4px solid white;
  border-radius: 50%;
}

.scrolled {
  background-color: #4cd137;
  top: -150px;
  transition: 0.3s;
}

.pimg img {
  width: 200px;
  height: 200px;
}

.profile-main {
  position: absolute;
  top: 310px;
  right: 0px;
  font-size: .775rem;
}

.nav-tabs {
  border: 0px solid #dee2e6;
}

.nav {
  border: 0px solid #dee2e6;
}

.nav-link.active {
  color: #495057;
  background-color: #fff;
  border: 0px solid #dee2e6;
}

.profile-header .profile-header-tab {
  background: #fff;
  list-style-type: none;
  margin: -10px 0 0;
  padding: 0 0 0 140px;
  white-space: nowrap;
  border-radius: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>

<div id="main">
  <div id="profile" class="profile">
    <div class="row px-0">
      <div class="col-sm-12 mx-auto">
        <!-- Profile widget -->
        <div class="bg-white shadow rounded overflow-hidden">
          <div class="px-4 pt-0 pb-4 cover">
            <div class="media align-items-end profile-head">
              <div class="profile mr-3">
                <div class="green_icon"></div><img src="https://exciting-aryabhata.77-68-74-200.plesk.page/img/thumbs/10230.jpg" alt="..." width="130" class="img-rounded mb-2 img-thumbnail"><button type="button" class="btn btn-outline-dark btn-sm btn-block"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart custom1" viewBox="0 0 16 16">
  <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>Add to favourites</button></div>
              <div class="media-body mb-5 text-white">
                <h4 class="mt-0 mb-0">Shannon White, 35</h4>
                <p class="small mb-4"> <i class="fas fa-map-marker-alt mr-2"></i>Birmingham</p>
              </div>
            </div>
          </div>

          <div class="bg-light p-4 d-flex justify-content-end text-center">
            <ul class="list-inline mb-0">
              <li class="list-inline-item">
                <h5 class="font-weight-bold mb-0 d-block">4</h5><small class="text-muted"> <i class="fas fa-image mr-1"></i>Photos</small>
              </li>

              <li class="list-inline-item">
                <h5 class="font-weight-bold mb-0 d-block">11</h5><small class="text-muted"> <i class="fas fa-user mr-1"></i>Reviews</small>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<ul class="profile-header-tab nav nav-tabs profile-main">
  <li class="nav-item1"><a href="#profile-post" class="nav-link active show" data-toggle="tab">POSTS</a></li>
  <li class="nav-item1"><a href="#profile-about" class="nav-link" data-toggle="tab">ABOUT</a></li>
  <li class="nav-item1"><a href="#profile-photos" class="nav-link" data-toggle="tab">PHOTOS</a></li>
  <li class="nav-item1"><a href="#profile-videos" class="nav-link" data-toggle="tab">VIDEOS</a></li>
  <li class="nav-item1"><a href="#profile-friends" class="nav-link" data-toggle="tab">FRIENDS</a></li>
</ul>
<!-- END profile-header-tab -->

<div id="profile-middle" class="profile-middle">
  <div class="py-4 px-4">
    <div class="d-flex align-items-center justify-content-between mb-3">
      <h5 class="mb-0">Recent photos</h5><a href="#" class="btn btn-link text-muted">Show all</a>
    </div>

    <div class="row">
      <div class="col-sm-6 mb-2 pr-lg-1"><img src="https://bootstrapious.com/i/snippets/sn-profile/img-3.jpg" alt="" class="img-fluid rounded shadow-sm"></div>
      <div class="col-sm-6 mb-2 pl-lg-1"><img src="https://bootstrapious.com/i/snippets/sn-profile/img-4.jpg" alt="" class="img-fluid rounded shadow-sm"></div>
      <div class="col-sm-6 pr-lg-1 mb-2"><img src="https://bootstrapious.com/i/snippets/sn-profile/img-5.jpg" alt="" class="img-fluid rounded shadow-sm"></div>
      <div class="col-sm-6 pl-lg-1"><img src="https://bootstrapious.com/i/snippets/sn-profile/img-6.jpg" alt="" class="img-fluid rounded shadow-sm"></div>
    </div>

    <div class="py-4">
      <h5 class="mb-3">Recent posts</h5>
      <div class="p-4 bg-light rounded shadow-sm">
        <p class="font-italic mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        <ul class="list-inline small text-muted mt-3 mb-0">
          <li class="list-inline-item"><i class="fa fa-comment-o mr-2"></i>12 Comments</li>
          <li class="list-inline-item"><i class="fa fa-heart-o mr-2"></i>200 Likes</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- End profile widget -->
</div>

<div class="searchbar" id="searchbar">
  <form action="searchpage.php" id="searchform" method="get" name="searchform">
    <button class="fa fa-search fa-2x" id="searchsubmit" type="submit"></button> <input autocomplete="off" id="autoc" name="s" placeholder="Keywords (seperate with commas)" type="search">
  </form>
</div>

<div class="control" id="control-nav">
  <div class="nav-item" id="search">
    <i class="fas fa-search search"></i>
  </div>
  <div class="nav-item" id="notifications">
    <i class="fas fa-bell"></i>
  </div>
  <div class="nav-item" id="messages">
    <i class="fas fa-comment"></i>
  </div>
  <div class="nav-item" id="locationnav">
    <i class="fas fa-location-arrow"></i>
  </div>
  <div class="nav-item" id="user">
    <i class="fas fa-user"></i>
  </div>
</div>

【问题讨论】：

您的 sn-p 无法正常工作，因为您在 jQuery 之前加载了 Bootstrap。现在查看并进一步修改以显示您的问题。你真的在使用 Bootstrap 4.0.0 吗？旧/早期版本可能有很多错误。
另外，您的标记似乎很不稳定。我使用 Tidy 按钮对其进行格式化，似乎有一个额外的结束 div 标签。
这是一个演示示例，单击右侧的用户按钮以查看我的意思 shorturl.at/lrPY0

标签： html jquery css bootstrap-4

【解决方案1】：

如果您正在寻找滚动容器的底部，您需要检查scrollTop（您滚动了多远）加上offsetHeight（容器的渲染高度）大于或等于scrollHeight（容器中内容的总可滚动高度）。

这是一个原生 JavaScript 示例。

const scrollContainer = document.querySelector('.scrollable-container');
const positionDisplay = document.querySelector('#scroll-position');
const bottomMessage = document.querySelector('#at-bottom');
const topMessage = document.querySelector('#at-top');

scrollContainer.addEventListener('scroll', event => {

  const top = event.target.scrollTop;
  const offset = event.target.offsetHeight;
  const height = event.target.scrollHeight;

  positionDisplay.innerText = event.target.scrollTop;
  
  topMessage.style.display = top == 0
    ? 'block'
    : 'none';
  
  bottomMessage.style.display = top + offset >= height
    ? 'block'
    : 'none';
});

.scrollable-container {
  border: 1px solid black;
  max-height: 120px;
  overflow-y: scroll;
}

<div class="scrollable-container">
  <ul>
    <li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li>
  </ul>
</div>

<p>The current position is: <span id="scroll-position">0</span></p>
<p id="at-top">You are at the top</p>
<p id="at-bottom" style="display: none">You are at the bottom</p>

根据this answer by Josh Crozier，jQuery 中offsetHeight 的等价物是.outerHeight() 尽管you may want to round the value you get。

似乎没有 scrollHeight 的等效项，因此根据 Anmol Saraf 的 this answer，您需要使用 $('')[0].scrollHeight 来访问本机属性。

这意味着等效的计算是：

$(function () {
    var $win = $('#profile-middle');

    $win.scroll(function () {
        if ($win.scrollTop() == 0)
            alert('Scrolled to Page Top');
        else if ($win.scrollTop() + Math.Round($win.outerHeight()) >= $win[0].scrollHeight) {
            alert('Scrolled to Page Bottom');
        }
    });
});

【讨论】：

链接答案时，您真的不需要提及作者。这一切都可以在答案中找到。
嗨，谢谢你，但它的工作原理和我以前一样！ div 没有设置高度，这是我认为是错误的，但如果我改变它，它不再滚动，例如这里 shorturl.at/lrPY0

【解决方案2】：

它工作正常，我只是检测到它向下滚动了 x 个像素，因为我不希望它滚到底部。

$(function () {
    var $win = $('#profile-middle');

    $win.scroll(function () {
        if ($win.scrollTop() == 0)
            alert('Scrolled to Page Top');
        else if ($win.scrollTop() >= 300) {
            alert('Scrolled to Page Bottom');
        }
    });
});

【讨论】：