Question

我正在尝试创建http://pomax.github.io/bezierinfo/#circles_cubic滚动系统，当点击箭头时，它们向上或向下滑动项目div。问题是，我想检测用户何时到达项目div的顶部，以便他们无法向上或向下滚动到遗忘。有没有人有任何建议？

到目前为止，

this是我的代码，它滑了起来，只是错过了我现在想要解决的这个噱头：

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

我可能建议只使用鼠标将该区域添加到您的css中即可滚动区域：

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

当Div到达顶部或底部时检测

1 个答案: