使用两个按钮（图像）滚动设置为溢出的 DIV：隐藏；使用 jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6504244/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use two buttons (images) to scroll a DIV which is set to overflow: hidden; with jQuery
提问by maze
i am having a div container:
我有一个 div 容器：
.mask {
height: 157px;
overflow: hidden;
}
the content inside this container is longer than 157px. i have two links (images) that i want to use to scroll the content inside the container up or down:
此容器内的内容长于 157 像素。我有两个链接（图像），我想用它们来向上或向下滚动容器内的内容：
<ul class="scroll">
<li><a href="#"><img src="img/text-down-icn.png" alt="scroll down" /></a></li>
<li><a href="#"><img src="img/text-up-icn.png" alt="scroll up" /></a></li>
</ul>
how can i get those two links to scroll the content of inside the container?
我怎样才能让这两个链接滚动容器内的内容？
thanks a lot
多谢
===========================================
============================================
Thanks for your help. Turns out it works best using the scrollTo Plugin (http://plugins.jquery.com/project/ScrollTo).
谢谢你的帮助。事实证明，使用 scrollTo 插件 (http://plugins.jquery.com/project/ScrollTo) 效果最好。
$(document).ready(function(){
$(".down").click(function () {
$('.mask').scrollTo( '+=156px', 500 );;
});
$(".up").click(function () {
$('.mask').scrollTo( '-=156px', 500 );;
});
});
回答by Tim
If you want to use onmouseover and onmouseout event you could use something like that :
如果你想使用 onmouseover 和 onmouseout 事件，你可以使用类似的东西：
onmouseover :
鼠标悬停：
function scrollUp(){
document.getElementById('scroll-pane').scrollTop -= 15; // vertical scroll increments
timerScrollUp = setTimeout('scrollUp()',10);
}
and onmouseout you clear timer :
和 onmouseout 你清除计时器：
clearTimeout(timerScrollUp);
回答by Chris
Here is some code that works :) You'll need to add some styling to prevent the buttons from moving too. Add the "fixed" position for the buttons.
这是一些有效的代码:) 您需要添加一些样式以防止按钮也移动。为按钮添加“固定”位置。
Essentialyl what is happening here is the content is being moved up/down in/out of the container making it appear to scroll. While the buttons themselves are untouched!
Essentialyl 这里发生的事情是内容正在向上/向下移入/移出容器，使其看起来滚动。虽然按钮本身没有受到影响！
Hope this is of use :)
希望这是有用的:)
<div class="mask">
<div id="mover">
Content Here
</div>
<ul class="scroll">
<li><a href="#" class="down"><img src="img/text-down-icn.png" alt="scroll down" /></a></li>
<li><a href="#" class="up"><img src="img/text-up-icn.png" alt="scroll up" /></a></li>
</ul>
</div>
<script type="text/javascript">
$(".down").click(function () {
$("#mover").animate({marginTop: '-=20px'}, 0);
});
$(".up").click(function () {
$("#mover").animate({ marginTop: '+=20px' }, 0);
});
</script>
<style>
.mask {
height: 157px;
overflow: hidden;
}
.scroll
{
float: right;
}
</style>
