Detect when Div has reached the top or bottom

Question

I am trying to create this scrolling system where when the arrows get clicked they slide the project div up or down. The problem is that I would like to detect when the user has reached the top of the projects div so that they could not scroll up or down to oblivion. Does anyone have any suggestion?

This is my code so far, it slides up, just missing this gimmick I am trying to figure out now:

$(function() {

  var height = 1000;
  var animSpeed = 1000;
  var topArrowbtn = $('.arrowTop');
  var bottomArrowbtn = $('.arrowBottom');
  var $slider = $('.projectorganizer');
  var $slideContainer = $('.SlideContainer', $slider);
  var $projects = $('.projectC', $slider);
  var $p1 = $('.pro1');
  var $p2 = $('.pro2');

  var $project = $('.videoSel');
  var $project2 = $('.videoSel2');
  var $project3 = $('.videoSel3');
  var interval;

  function startSlidingUp() {
    $slideContainer.animate({
        'margin-top': '+=' + 50
      }, animSpeed, function() {}

    );

  }

  function changeProject1() {
    $("div.videoSel").replaceWith($project2);

  }

  function changeProject2() {
    $("div.videoSel2").replaceWith($project3);

  }

  $p2
    .on('click', changeProject2);

  $p1
    .on('click', startSlidingUp);

});

.Projectscontent {
  width: 900px;
  max-height: 450px;
  margin: 3% auto;
  text-align: center;
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
  -webkit-transform: rotate(0.000001deg);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.projectchooser {
  width: 200px;
  height: 300px;
  background-color: #FF9900;
  float: left;
}
.projectorganizer {
  overflow: hidden;
  position: relative;
  width: 100px;
  margin: 25px auto;
  height: 250px;
  background-color: #0C3;
  max-width: 100px;
  max-height: 250px;
}
.arrowTop {
  width: 100px;
  height: 20px;
  margin-bottom: 5px;
  background-color: #FF0;
}
.arrowBottom {
  width: 100px;
  height: 20px;
  margin-top: 5px;
  background-color: #FF0;
  bottom: 0;
  position: absolute;
}
.hiddenContent {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  max-width: 20px;
  max-height: 20px;
  background-color: #0CF;
  z-index: -2;
}
.projectC {
  width: 100px;
  height: 80px;
  margin: 2px 0;
  background-color: #3FC;
}
.Desccontent {
  float: left;
}
.ContentTitle {
  background-color: #0CF;
  width: 900px;
  min-height: 50px;
}
.ContentTitleTextContainer {
  max-width: 800px;
  max-height: 50px;
  padding-top: 10px;
  margin: 0 auto;
}
.TitleDesc {
  min-width: 800px;
  max-width: 800px;
  max-height: 50px;
  margin: 0 auto;
  font-size: 24px;
  color: #FFF;
}
.ContentDesc {
  background-color: #0CF;
  width: 900px;
  min-height: 100px;
}
.descP {
  max-width: 800px;
  max-height: 50px;
  padding-top: 20px;
  margin: 0 auto;
}
.Pclass {
  line-height: 20px;
  max-width: 800px;
  max-height: 50px;
  margin: 10 auto;
  text-align: justify;
  overflow: scroll;
  overflow-x: hidden;
  color: #FFF;
  padding-right: 5px;
}
.videoP {
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -moz-border-bottom-left-radius: 0px;
  -webkit-border-bottom-right-radius: 0px;
  -moz-border-bottom-right-radius: 0px;
  -webkit-border-top-left-radius: 0px;
  -moz-border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-top-right-radius: 0px;
  width: 700px;
  max-height: 300px;
  overflow: hidden;
  position: relative;
}
@font-face {
  font-family: "Inconsolata";
  src: url('Inconsolata.otf');
}
video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background-size: cover;
  transition: 1s opacity;
}
.footer {
  clear: both;
}

<div class="Projectscontent">
  <div class="ContentTitle">
    <div class="ContentTitleTextContainer">
      <p class="TitleDesc">ffffffffffffffffffffffffffffffffffffffff</p>
    </div>
  </div>
  <div class="footer"></div>
  <div class="projectchooser">
    <div class="projectorganizer">
      <div class="arrowClass">
        <div class="arrowTop"></div>
        <div class="arrowBottom"></div>
      </div>
      <ul class="SlideContainer">
        <li class="projectC pro1"></li>
        <li class="projectC pro2"></li>
        <li class="projectC pro3"></li>
      </ul>
    </div>
  </div>
  <div class="videoP">
    <div class="videoSel">
      <iframe src="https://player.vimeo.com/video/152053434" ?autoplay=0&loop=0&title=0&byline=0&portrait=0 width="700" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
  </div>
  <div class="ContentDesc">
    <div class="descP">
      <p class="Pclass">fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</p>
    </div>
  </div>
</div>

<div class="hiddenContent">
  <div class="videoSel2">
    <iframe src="https://player.vimeo.com/video/150052234" ?autoplay=0&loop=0&title=0&byline=0&portrait=0 width="700" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
  <div class="videoSel3">
    <iframe src="https://player.vimeo.com/video/148650205" ?autoplay=0&loop=0&title=0&byline=0&portrait=0 width="700" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>

Answer 1

I may suggest simply to make the area scrollable with mouse adding this to your css:

.projectorganizer {
....
}
.SlideContainer {
    width:calc(100% + 17px);
    height: 110%;
    overflow-y: scroll;
    overflow-x: hidden;
}