How can I detect when a scrollable div is scrolled down not the whole page?-CodePudding

I have some code that has a header and a footer which is a sort of navigation but is always present. I have a div in the middle which is scrollable. I have it so I can detect when it is scrolled to the top but not at the bottom. I want it to look a little like Facebook profile page and it will have more info in the scrollable div eventually. Ultimately I want the header, which is the images and name to disappear out of sight and just leave the name and little circle image when scrolled up, I can do this easily if I can get the scrolling detection working. I want it to have a mobile feel to it.

I think its because of how I have set it up and I have tried all sorts to change it without changing its appearance. I am using bootstrap.

I have it working like so but does not work with the snippet added? Its the <div id="profile-middle" > I need to detect.

$(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" >
    <div >
      <div >
        <!-- Profile widget -->
        <div >
          <div >
            <div >
              <div >
                <div ></div><img src="https://exciting-aryabhata.77-68-74-200.plesk.page/img/thumbs/10230.jpg" alt="..." width="130" ><button type="button" ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  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 >
                <h4 >Shannon White, 35</h4>
                <p > <i ></i>Birmingham</p>
              </div>
            </div>
          </div>

          <div >
            <ul >
              <li >
                <h5 >4</h5><small > <i ></i>Photos</small>
              </li>

              <li >
                <h5 >11</h5><small > <i ></i>Reviews</small>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<ul >
  <li ><a href="#profile-post"  data-toggle="tab">POSTS</a></li>
  <li ><a href="#profile-about"  data-toggle="tab">ABOUT</a></li>
  <li ><a href="#profile-photos"  data-toggle="tab">PHOTOS</a></li>
  <li ><a href="#profile-videos"  data-toggle="tab">VIDEOS</a></li>
  <li ><a href="#profile-friends"  data-toggle="tab">FRIENDS</a></li>
</ul>
<!-- END profile-header-tab -->

<div id="profile-middle" >
  <div >
    <div >
      <h5 >Recent photos</h5><a href="#" >Show all</a>
    </div>

    <div >
      <div ><img src="https://bootstrapious.com/i/snippets/sn-profile/img-3.jpg" alt="" ></div>
      <div ><img src="https://bootstrapious.com/i/snippets/sn-profile/img-4.jpg" alt="" ></div>
      <div ><img src="https://bootstrapious.com/i/snippets/sn-profile/img-5.jpg" alt="" ></div>
      <div ><img src="https://bootstrapious.com/i/snippets/sn-profile/img-6.jpg" alt="" ></div>
    </div>

    <div >
      <h5 >Recent posts</h5>
      <div >
        <p >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 >
          <li ><i ></i>12 Comments</li>
          <li ><i ></i>200 Likes</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- End profile widget -->
</div>

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

<div  id="control-nav">
  <div  id="search">
    <i ></i>
  </div>
  <div  id="notifications">
    <i ></i>
  </div>
  <div  id="messages">
    <i ></i>
  </div>
  <div  id="locationnav">
    <i ></i>
  </div>
  <div  id="user">
    <i ></i>
  </div>
</div>

CodePudding user response：

If you're looking for the bottom of the scroll container, you need to check that the scrollTop (how far you've scrolled) plus the offsetHeight (the rendered height of the container) is greater than or equal to the scrollHeight (the total scrollable height of the content in the container).

Here's a native JavaScript example.

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 >
  <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>

Per this answer by Josh Crozier, the equivalent of offsetHeight in jQuery is .outerHeight() though you may want to round the value you get.

There doesn't appear to be an equivalent of scrollHeight, so per this answer by Anmol Saraf, you'd want to use $('')[0].scrollHeight to access the native property.

That means the equivalent calculation would be:

$(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');
        }
    });
});

CodePudding user response：

It works ok it I just detect it scrolled down x amount of pixels as I did not want it to go to the bottom.

$(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');
        }
    });
});