我正在尝试在容器内的容器中创建一个 div，该容器可以在 jQuery 中使用向上和向下箭头滚动。
我能找到的唯一我想使用的是 http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm
我会开始尝试将其转换为 jQuery，但是它似乎使用 ilayer 和 layer 之类的标签。如果可能的话，我想使用更多的标准标签。
任何指向正确方向的指针都将受到高度赞赏。
【问题讨论】：
标签： javascript jquery html css
我不知道这是否正是你想要的，但你知道你可以使用 CSS overflow 属性来创建滚动条吗？
CSS：
div.box{
width: 200px;
height: 200px;
overflow: scroll;
}
HTML：
<div class="box">
All your text content...
</div>
【讨论】：
一个优秀的插件是jscrollpane
【讨论】：
将您的内容 div 相对定位在具有溢出：隐藏的父 div 中。使您的向上/向下箭头移动内容 div 的顶部值。以下 jQuery 未经测试。如果您需要任何关于它作为概念的进一步帮助，请告诉我。
div.container {
overflow:hidden;
width:200px;
height:200px;
}
div.content {
position:relative;
top:0;
}
<div class="container">
<p>
<a href="enablejs.html" class="up">Up</a> /
<a href="enablejs.html" class="dn">Down</a>
</p>
<div class="content">
<p>Hello World</p>
</div>
</div>
$(function(){
$(".container a.up").bind("click", function(){
var topVal = $(this).parents(".container").find(".content").css("top");
$(this).parents(".container").find(".content").css("top", topVal-10);
});
$(".container a.dn").bind("click", function(){
var topVal = $(this).parents(".container").find(".content").css("top");
$(this).parents(".container").find(".content").css("top", topVal+10);
});
});
【讨论】：
scrollTop？
【讨论】：
我一直在寻找相同的答案，但找不到任何符合我想要的答案，所以我创建了自己的答案并将其发布在这里：
http://seekieran.com/2011/03/jquery-scrolling-box/
这里是重要的代码：
function ScrollDown(){
//var topVal = $('.up').parents(".container").find(".content").css("top").replace(/[^-\d\.]/g, '');
var topVal = $(".content").css("top").replace(/[^-\d\.]/g, '');
topVal = parseInt(topVal);
console.log($(".content").height()+ " " + topVal);
if(Math.abs(topVal) < ($(".content").height() - $(".container").height() + 60)){ //This is to limit the bottom of the scrolling - add extra to compensate for issues
$('.up').parents(".container").find(".content").stop().animate({"top":topVal - 20 + 'px'},'slow');
if (mouseisdown)
setTimeout(ScrollDown, 400);
}
递归实现：
$('.dn').mousedown(function(event) {
mouseisdown = true;
ScrollDown();
}).mouseup(function(event) {
mouseisdown = false;
});
感谢 Jonathan Sampson 提供了一些代码来启动，但它最初无法正常工作，因此我对其进行了大量修改。任何改进它的建议都可以在博客上的 cmets 或 cmets 中找到。
【讨论】：
我知道这已经很久了，但是今天早上搜索类似的东西，并阅读了 Atømix 的回复（因为这是我们的目标），我发现了这个：http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div。
只是把它放在那里以防其他人需要解决方案。 :)
【讨论】：
如果您不想自己编写简单的实现，可以使用插件。它被称为“scrollTo”（link）。它允许您执行程序滚动到某些点，或使用 -= 10px 之类的值进行连续滚动。
【讨论】：
这对我有用：
<html>
<head>
<title>scroll</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<style>
div.container {
overflow:hidden;
width:200px;
height:200px;
}
div.content {
position:relative;
width:200px;
height:200px;
overflow:hidden;
top:0;
}
</style>
<div class="container">
<p>
<a href="javascript:up();"><img src="/images/img_flecha_left.png" class="up" /></a>
<a href="javascript:down();"><img src="/images/img_flecha_left.png" class="down" /></a>
</p>
<div class="content">
<p>Hello World</p><p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
</div>
</div>
<script>
function up() {
var topVal = $(".content").css("top"); //alert(topVal);
var val=parseInt(topVal.replace("px",""));
val=val-20;
$(".content").css("top", val+"px");
}
function down() {
var topVal = $(".content").css("top"); //alert(topVal);
var val=parseInt(topVal.replace("px",""));
val=val+20;
$(".content").css("top", val+"px");
}
</script>
</body>
</html>
【讨论】：