Question

我们有什么方法可以为div标签添加滚动条的图像。我想要使用我们得到的普通滚动条[我不想使用该滚动条的颜色]

一旦div的高度设置超过我需要获取我的图像[滚动的自定义图像]

我们有什么方法可以完成它任何想法PLZ与我分享

Answer 1

AFAIK，没有办法将图像设置为滚动条。我想你必须自己创造一些东西。在div上混合使用jQuery slider和overflow:hidden，您应该可以很好地自定义它。

但正如大卫所链接的那样，它不是非常用户友好。

Answer 2

你可以尝试这样的东西来真正搞乱你的滚动条（在IE中尝试不起作用）

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

但我怀疑这是个好主意。我认为让这些东西变得漂亮是很困难的......除非你使用某种图像进行上下运动以及在单击时滚动div的事件

这是一个链接，您可以在其中进行以前的滚动条样式修改。

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

Answer 3

使用此javascript类...

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

为下面列出的标记声明以下内容......

var oScroller = new Scroller('container');

html标记......

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

如何在div标签中添加滚动图像

3 个答案: