javascript - Automatically vertically scroll div contents looping - Stack Overflow

admin管理员组

文章数量:1356304

I am trying to find a simple way to have a div with just text in it automatically scroll the text vertically. I don't want to use a framework (though I do use Prototype, so if it is easier using Prototype then that is fine, but no Scriptalicious).

I assume there has got to be a way to do this with a few lines of code, but I am not familiar enough with Javascript to know how to most effectively do that.

I am trying to find a simple way to have a div with just text in it automatically scroll the text vertically. I don't want to use a framework (though I do use Prototype, so if it is easier using Prototype then that is fine, but no Scriptalicious).

I assume there has got to be a way to do this with a few lines of code, but I am not familiar enough with Javascript to know how to most effectively do that.

• javascript
• html
• prototype
• scroll
• autoscroll

Share Improve this question Follow asked Dec 22, 2009 at 19:50 James SimpsonJames Simpson 13.7k2626 gold badges8585 silver badges111111 bronze badges 1

• Check the edit to my answer... – ekhaled Commented Dec 24, 2009 at 1:16

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

This might not be conventional but you can try the <marquee> tag

it works both in IE and FF, and the last time I checked, safari too.

<marquee behavior="scroll" direction="up" height="250" 
   scrollamount="2" scrolldelay="10"">
  Your content goes here
</marquee>

should give you what you want,
and you can style them like any <div>...
and then there is the added advantage of having no javascript...

Edit in response to your ment

It gets better, try this in any browser

onmouseover="this.stop()" onmouseout="this.start()"

And this in IE

style="filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=0,
FinishOpacity=100, 
Style=1, StartX=0,  FinishX=0, StartY=0, FinishY=10) 
progid:DXImageTransform.Microsoft.Alpha( Opacity=100, FinishOpacity=0, 
Style=1, StartX=0, FinishX=0, StartY=90, FinishY=100)" 

As attributes of the marquee tag...

function scrollDivUp(id){
    document.getElementById(id).scrollTop-=1
    timerUp=setTimeout("scrollDivUp('"+id+"')",10)
}

try something like that maybe.

you could also change the .scrollTop-=1 to .scrollTop+=1 to scroll the other way.

You would also need a scrollable div which can be done by constraining the size and setting the overflow style property ie. style="width:200px; height:300px; overflow:auto"

Try changing the div's scrollTop. There is an example here.

I see that the correct answer isn't given yet. I think you have to look at cloneNode() for instance. And clone the element you want to scroll. When the first element is at the last point of scrolling then place the duplicated element after the first element. And when that duplicated element is almost at the end, place the original after the duplicate and so on!

本文标签： javascriptAutomatically vertically scroll div contents loopingStack Overflow