检测Div何时达到顶部或底部 [英] Detect when Div has reached the top or bottom
本文介绍了检测Div何时达到顶部或底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建此滚动系统，在该滚动系统中，单击箭头时，它们会向上或向下滑动项目div .问题是我想检测用户何时到达项目div的顶部，以使他们无法向上或向下滚动到遗忘.有人有什么建议吗?
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>
推荐答案
我可能建议您简单地使用鼠标将该区域添加到您的CSS中，以使其可滚动:
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;
}
这篇关于检测Div何时达到顶部或底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
