Scrolling a div with jQuery

Question

I am attempting to create a div in a container within a container which is scrollable with up and down arrows in jQuery.

The only thing I can find which I wish to use was http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm

I would've started attempting to convert that to jQuery, however it apepars to use tags like ilayer and layer. I would like to use more standard tags if possible.

Any pointers in the right direction would be highly appreciated.

Particularly for dynamic height would be good. I need this as well. — Kieran Senior, Jul 28 '09 at 11:22
Thanks for the feedback. I would like to use ScrollTo jQuery Plugin however I cannot actually get it to work. It is lacking a simple example - which is all I need! — , Jul 28 '09 at 14:53

score 25 · Answer 1 · answered Jul 28 '09 at 12:36

25

I don't know if this is exactly what you want, but did you know you can use the CSS overflow property to create scrollbars?

CSS:

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

HTML:

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

answered Jul 28 '09 at 12:36

DisgruntledGoat

70,219
68
205
290

6

I think what the OP wanted to do, though, is replace this functionality with jQuery. Actually, I would probably set the CSS overflow to auto. No need for scrollbars if the content isn't longer than the div. This should actually be the default CSS for the DIV. javascript should be used to turn off overflow. – Armstrongest Feb 12 '10 at 19:45
You solved a very big problem of mine with this code. I want some little more help. How can I change color or format of these scroll bars of div? – Aishwarya Shiva Mar 20 '12 at 18:39

score 10 · Answer 2 · answered Oct 26 '11 at 23:09

10

An excellent plug-in is jscrollpane

answered Oct 26 '11 at 23:09

Eduardo Molteni

38,786
23
141
206

This is absolutely beautiful. I integrated it into a site within minutes. Amazing Job !!!! – John Hawkins Mar 29 '12 at 19:32

Posto · Answer 3 · 2009-07-28T11:46:25.433

7

jCarousel is a Jquery Plugin , it have same functionality already implemented , which might want to archive. it's nice and easy. here is the link

and complete documentation can be found here

edited Jul 28 '09 at 11:46

answered Jul 28 '09 at 11:20

Posto

7,362
7
44
61

Please describe what you have linked to, it may get you more upvotes. Thanks! – Jon Winstanley Jul 28 '09 at 11:29
This example doesn't work in firefox 4, some others at: http://sorgalla.com/projects/jcarousel/#Examples do. – Kevin Williams May 30 '11 at 17:17

Sampson · Answer 4 · 2009-07-28T11:28:21.337

Relatively-position your content div within a parent div having overflow:hidden. Make your up/down arrows move the top value of the content div. The following jQuery is untested. Let me know if you require any further assistance with it as a concept.

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

Why not increment and decrement `scrollTop` with a timer? – aditya Jul 28 '09 at 11:59 — aditya, Jul 28 '09 at 11:59
I believe you can do .css("top", "+=10px"); ? – Alextoul Oct 09 '12 at 13:11 — Alextoul, Oct 09 '12 at 13:11

Kieran Andrews · Answer 5 · 2011-03-09T06:33:12.513

I was looking for this same answer and I couldn't find anything that did exactly what I wanted so I created my own and posted it here:

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

Working Demo: http://jsbin.com/azoji3

Here is the important code:

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

Recursion to make it happen:

 $('.dn').mousedown(function(event) {
    mouseisdown = true;
    ScrollDown();
}).mouseup(function(event) {
    mouseisdown = false;
});

Thanks to Jonathan Sampson for some code to start but it didn't work initially so I have heavily modified it. Any suggestions to improve it would be great here in either the comments or comments on the blog.

score 2 · Answer 6 · answered Aug 31 '10 at 10:21

I know this is ages old, but upon searching for something similar this morning, and reading up on Atømix' response (as this is what we're aiming on achieving), I found this: http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div.

Just putting that there in case anyone else needs a solution. :)

score 1 · Answer 7 · answered May 16 '12 at 14:28

This worked for me:

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

score 1 · Answer 8 · answered Jul 28 '09 at 12:01

There's a plug-in for this if you don't want to write a bare-bones implementation yourself. It's called "scrollTo" (link). It allows you to perform programmed scrolling to certain points, or use values like -= 10px for continuous scrolling.

ScrollTo jQuery Plug-in

Scrolling a div with jQuery

8 Answers8

Linked