使用jQuery滚动div

Question

我试图在容器内的容器中创建一个div,它可以在jQuery中使用向上和向下箭头滚动.

我唯一能找到的东西是 http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm

我会开始尝试将其转换为jQuery,但是它可以使用像ilayer和layer这样的标签.如果可能,我想使用更多标准标签.

任何正确方向的指针都将受到高度赞赏.

Answer 1

我不知道这是不是你想要的,但你知道你可以使用CSS overflow属性来创建滚动条吗？

CSS:

div.box{
  width: 200px;
  height: 200px;
  overflow: scroll;
}

HTML:

<div class="box">
  All your text content...
</div>

Answer 2

一个优秀的插件是jscrollpane

Answer 3

jCarousel是一个Jquery插件,它已经实现了相同的功能,可能需要存档.这很好,也很容易. 这是链接

并且可以在此处找到完整的文档

Answer 4

在具有overflow:hidden的父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);
  });
});