要重现我的问题,请点击 down
按钮 4 次,然后点击 up
按钮。您会注意到您必须再单击一次才能使底部向上工作。如何检测它到达底部并返回错误?
var scrollValue = 0;
$('#down').click(function(){
scrollValue = scrollValue + 180;
$('ul').animate({scrollTop:scrollValue});
});
$('#up').click(function(){
scrollValue = scrollValue + -180;
$('ul').animate({scrollTop:scrollValue});
});
ul {
padding: 0;
margin: 0;
height: 180px;
overflow: auto;
}
li {
height: 50px;
background: pink;
list-style: none;
margin-bottom: 10px;
height: 50px;
}
body {
padding: 0;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<button id="up">up</button>
<button id="down">down</button>
最佳答案
所以,就像我在评论中所说的那样。您需要容器高度(使用 scrollHeight
),如果滚动更远,它需要等于高度。当它试图低于 0 时也是如此。它必须重置为 0。
var scrollValue = 0;
var nHeight = $('ul').height();
var height = $('ul').prop('scrollHeight');
height = height - nHeight;
$('#down').click(function(){
var nScrollValue = scrollValue + 180;
if(nScrollValue < height){
scrollValue = nScrollValue;
} else {
scrollValue = height;
}
$('ul').animate({scrollTop:scrollValue});
});
$('#up').click(function(){
var nScrollValue = scrollValue - 180;
if(nScrollValue > 0){
scrollValue = nScrollValue;
} else {
scrollValue = 0;
}
$('ul').animate({scrollTop:scrollValue});
});
var scrollValue = 0;
var nHeight = $('ul').height();
var height = $('ul').prop('scrollHeight');
height = height - nHeight;
$('#down').click(function(){
var nScrollValue = scrollValue + 180;
if(nScrollValue < height){
scrollValue = nScrollValue;
} else {
scrollValue = height;
}
$('ul').animate({scrollTop:scrollValue});
});
$('#up').click(function(){
var nScrollValue = scrollValue - 180;
if(nScrollValue > 0){
scrollValue = nScrollValue;
} else {
scrollValue = 0;
}
$('ul').animate({scrollTop:scrollValue});
});
ul {
padding: 0;
margin: 0;
height: 180px;
overflow: auto;
}
li {
height: 50px;
background: pink;
list-style: none;
margin-bottom: 10px;
height: 50px;
}
body {
padding: 0;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<button id="up">up</button>
<button id="down">down</button>
我认为你应该让浏览器为你做这件事,不需要跟踪 scrollValue
:
$('#down').click(function(){
$('ul').animate({scrollTop: '+=180'});
});
$('#up').click(function(){
$('ul').animate({scrollTop: '-=180'})
});
$('#down').click(function(){
$('ul').animate({scrollTop: '+=180'});
});
$('#up').click(function(){
$('ul').animate({scrollTop: '-=180'})
});
ul {
padding: 0;
margin: 0;
height: 180px;
overflow: auto;
}
li {
height: 50px;
background: pink;
list-style: none;
margin-bottom: 10px;
height: 50px;
}
body {
padding: 0;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<button id="up">up</button>
<button id="down">down</button>
关于javascript - 到达底部时单击以防止滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33149444/