how to add an image for scroll in div Tags

Question

hi

is there any way we can add image for our scroll bar for the div tags. i dnt want to use the normal scroll bar that we get[i dnt want to use colors for that scroll bar]

once the the height of the div is set once it exceeds i need to get my image[ custom image for the scroll]

is there any way we can get it done any idea plz share with me

Answer 1

AFAIK, there isn't a way to set an image as scroller. I think you'll have to create something yourself. Using a mix of jQuery slider and overflow:hidden on a div, you should be able to customize it pretty well.

But as David links to, it isn't very user friendly.

Answer 2

you can try this one....

p7 scrollbar

Answer 3

You can try something like this to really uglify your scrollbars (doesn't work in FF try in IE)

<style>
body {
scrollbar-base-color: #EFD700;
scrollbar-arrow-color: #219B00;
scrollbar-3dlight-color: #00D8B1;
scrollbar-highlight-color: #26005B;
scrollbar-track-color: #03EF00;
}
</style>

but I doubt it's a good idea. I think it's difficult to make those things pretty.. unless you use some sort of images for the up and down and events that scroll the div when it's clicked on

Here is a link where you can previous scrollbar styling modifications.

http://www.iconico.com/CSSScrollbar/

Answer 4

Using this javascript class...

function Scroller(elemId)
{
    this.intervalId=null;
    this.StartScrollLeft=function() {
        this.intervalId=setInterval("document.getElementById('"+elemId+"').scrollLeft-=5",25);
    }
    this.StartScrollRight=function() {
        this.intervalId=setInterval("document.getElementById('"+elemId+"').scrollLeft+=5",25);
    }
    this.StartScrollUp=function() {
        this.intervalId=setInterval("document.getElementById('"+elemId+"').scrollTop-=5",25);
    }
    this.StartScrollDown=function() {
        this.intervalId=setInterval("document.getElementById('"+elemId+"').scrollTop+=5",25);
    }
    this.StopScroll=function() {
        clearInterval(this.intervalId);
    }
}

declare the following for the markup listed below...

var oScroller = new Scroller('container');

the html markup...

<img id="scrollUpControl" src="up.png" onmousedown="oScroller.StartScrollUp()" onmouseup="oScroller.StopScroll()" onmouseleave="oScroller.StopScroll()" />
<img id="scrollDownControl" src="down.png" onmousedown="oScroller.StartScrollDown()" onmouseup="oScroller.StopScroll()" onmouseup="oScroller.StopScroll()" />
<div id="container" style="height:200px; overflow:hidden">...</div>