Javascript jQuery:：Scrollable Div不起作用
我正在尝试使用以下命令创建可滚动的DIV：Javascript jQuery:：Scrollable Div不起作用,javascript,jquery,css,Javascript,Jquery,Css,我正在尝试使用以下命令创建可滚动的DIV： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Test</title> <meta http-equiv="Content-Type"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
<style type="text/css">
div.container {
overflow:hidden;
width:200px;
height:200px;
}
div.content {
position:relative;
top:0;
}
</style>
<script type="text/javascript">
$(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);
});
});
</script>
</head>
<body>
<div class="container">
<p>
<a href="#" class="up">Up</a> /
<a href="#" class="dn">Down</a>
</p>
<div class="content">
<p>Hello World 1</p>
<p>Hello World 2</p>
<p>Hello World 3</p>
<p>Hello World 4</p>
<p>Hello World 5</p>
<p>Hello World 6</p>
<p>Hello World 7</p>
<p>Hello World 8</p>
<p>Hello World 9</p>
<p>Hello World 10</p>
<p>Hello World 10</p>
<p>Hello World 11</p>
<p>Hello World 12</p>
<p>Hello World 13</p>
<p>Hello World 14</p>
<p>Hello World 15</p>
<p>Hello World 16</p>
<p>Hello World 17</p>
<p>Hello World 18</p>
<p>Hello World 19</p>
<p>Hello World 20</p>
<p>Hello World 21</p>
<p>Hello World 22</p>
<p>Hello World 23</p>
<p>Hello World 24</p>
<p>Hello World 25</p>
<p>Hello World 26</p>
<p>Hello World 27</p>
</div>
</div>
</body>
</html>
试验
分区集装箱{
溢出：隐藏；
宽度：200px；
高度：200px；
}
部门内容{
位置：相对位置；
排名：0；
}
$（函数（）{
$（“.container a.up”）.bind（“单击”，函数（）{
var topVal=$（this）.parents（.container”）.find（.content”）.css（“top”）；
$（this.parents（“.container”）.find（“.content”）.css（“top”，topVal-10）；
});
$（“.container a.dn”）.bind（“单击”，函数（）{
var topVal=$（this）.parents（.container”）.find（.content”）.css（“top”）；
$（this.parents（“.container”）.find（“.content”）.css（“top”，topVal+10）；
});
});
/
你好，世界1
你好，世界2
你好，世界3
你好，世界4
你好，世界5
你好，世界6
你好，世界7
你好，世界8
你好，世界9
你好，世界10
你好，世界10
你好，世界11号
你好，世界12
你好，世界13
你好，世界14
你好，世界15
你好，世界16
你好，世界17
你好，世界18
你好，世界19
你好，世界20
你好，世界21
你好，世界22
你好，世界23
你好，世界24
你好，世界25
你好，世界26
你好，世界27
编辑：我尝试了溢出：自动和溢出：隐藏两种方法为什么使用溢出：隐藏尝试使用溢出：自动 div.container{ 溢出：自动； 宽度：200px； 高度：200px；
}为什么使用溢出：隐藏尝试使用溢出：自动 div.container{ 溢出：自动； 宽度：200px； 高度：200px；
}您必须使用overflow:auto，否则将不会显示滚动条 编辑：我只是把你的代码放到一个页面上看了看。这稍微改变了我的答案。据我所见，你想让它通过上/下链接滚动吗 您应该使用
$（this）.preventDefault（）您必须使用overflow:auto，否则将不会显示滚动条 编辑：我只是把你的代码放到一个页面上看了看。这稍微改变了我的答案。据我所见，你想让它通过上/下链接滚动吗 您应该使用
$（this）.preventDefault（）topVal100pxparseInt（topVal，10）#最好还是使用完全正常的
溢出：autotopVal100pxparseInt（topVal，10）#最好还是使用完全正常的
溢出：auto