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插件，它已经实现了相同的功能，可能需要存档。这很好，也很容易。 here是链接

可以找到完整的文档here

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);
  });
});

Answer 5

我一直在寻找同样的答案，我找不到任何完全符合我想要的东西，所以我创建了自己的答案，然后在这里发布：

http://seekieran.com/2011/03/jquery-scrolling-box/

工作演示：http://jsbin.com/azoji3

以下是重要的代码：

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开始使用某些代码，但它最初没有用，所以我对其进行了大量修改。在博客上的评论或评论中，任何改进它的建议都会很棒。

Answer 6

我知道这已经很久了，但是在今天早上寻找类似的事情，并阅读了Atømix的回应（因为这是我们的目标），我发现了这一点：http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div。< / p>

只要把它放在那里以防其他人需要解决方案。：）

Answer 7

如果您不想自己编写一个简单的实现，那么就有一个插件。它被称为“scrollTo”（link）。它允许您对特定点执行编程滚动，或使用-= 10px之类的值进行连续滚动。

ScrollTo jQuery Plug-in

Answer 8

这对我有用：

<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>

使用jQuery滚动div

8 个答案: