更新时间：2015年10月21日

超酷带纹理网页滚动条效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>超酷带纹理网页滚动条效果</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
	html {
		overflow: hidden;
	}
	body {
		margin: 0px;
		padding: 0px;
		background: #222;
		position: absolute;
		width: 100%;
		height: 100%;
		pointer: default;
	}
	#screen {
		position: absolute;
		left: 20%;
		height: 40%;
		top: 10%;
		width: 60%;
		overflow: auto;
		background: #000;
		color: #fff;
	}
	#screen2 {
		position: absolute;
		left: 20%;
		height: 30%;
		width: 60%;
		top: 60%;
		overflow: auto;
		background: #111;
		color: #fff;
	}
	.content {
		position:relative;
		font-size: 0.8em;
		font-family: verdana;
		color: #fff;
		padding: 1em;
		height: 100%;
	}
	a {
		text-decoration: none;
		color:#ff8000;
	}
	a:hover	{
		text-decoration: none;
		background:#ff8000;
		color:#ffffff;
	}
	a:visited {
		text-decoration: none;
		color:#ff8000;
	}
	a:visited:hover {
		text-decoration: none;
		background:#ff8000;
		color:#ffffff;
	}
	.cds_scrollbar {
		position: absolute;
		background: #555 url(http://www.lanrentuku.comhttp://www.lanrentuku.com/down/js/images/12476505130.gif);
		right: 0px;
		cursor: pointer;
	}
	.cds_scrollbar_over {
		background: #aaa url(http://www.lanrentuku.comhttp://www.lanrentuku.com/down/js/images/12476497481.gif);
	}
	.cds_scrollbar_pushed {
		background: #fff url(http://www.lanrentuku.comhttp://www.lanrentuku.com/down/js/images/12476497480.gif);
	}
	.cds_track {
		position: absolute;
		background: #222 url(http://www.lanrentuku.comhttp://www.lanrentuku.com/down/js/images/12476497482.gif);
		right: -1px;
		top: 0px;
		height: 100%;
		cursor: pointer;
	}
	.cds_up {
		position: absolute;
		background: #f60 url(http://www.lanrentuku.comhttp://www.lanrentuku.com/down/js/images/12476497483.gif);
		right: 0px;
		top: 0px;
		cursor: pointer;
	}
	.cds_down {
		position: absolute;
		background: #f60 url(http://www.lanrentuku.comhttp://www.lanrentuku.com/down/js/images/12476497483.gif);
		right: 0px;
		bottom: 0px;
		cursor: pointer;
	}
</style>

onload = function() {
	/* init scrollbars */
	cds.add('screen');
	cds.add('screen2');
}

</script>
</head>
<body>

<div id="screen">
<div class="content">
<h2>Skinned HTML Scrollbar</h2>

Well, usually I don't comment my work, but this one being a "pure technical demo", and as I had to place some content here, I will make an exception.<br><br>
Once upon the time I stumbled upon the great
<a href="http://www.hesido.com/web.php?page=customscrollbar" target="_blank">fleXcroll: Cross Browser Custom ScrollBar script</a> by Hesido.
<br><br>I was very curious to see how this was done and even possible, but looking at the JS code, I couldn't understand a bit of it. Sort of disappointed, I decided to "reinvent the [mouse] wheel" and see what I could do myself.
<br><br>
As always, it was just a "pushing the envelope" kind of exercice, and it might or might not work for you. Please don抰 use this in your production sites as it could divide by zero and blow up destroying the world.
<br><br>

My expectations:
<ul>
	<li>Minimal and plain old JS code
	<li>No CSS hack, no "bugs compliant" features, minimum browsers work-arounds
	<li>No JS mousewheel and keyboard event: just hook to the native OS scrolling mechanism (that's the trick, the actual scrollbars are still there, the script is just painting on top of them)
	<li>Skinned scrollbars 100% CSS positionned, by the browser itself and not by my JS code - no lag on resize (that's the second trick)
	<li>Zero CPU cycle used when idle - no setInterval loop
</ul>
<br>
Findings :
<ul>
	<li>Avoid reading cascaded style sheet from JS (that's a mess)
	<li>Avoid dealing with <a href="http://erik.eae.net/archives/2007/07/27/18.54.15/" target="_blank">computed vs. cascaded</a> browsers inconsistencies (that's another mess)
	<li>Firefox is unable to know whether the left mouse button is pressed or not
	<li>SAFARI will handle JS events outside of its window (and that's great!)
</ul>
<br>
Known issues:
<ul>
	<li>Will manage vertical scrollbars only
	<li>Won't work in Opera (onmouseup event won't fire, drawings/refresh artifacts)
	<li>Firefox won't release the left mouse button outside of the browser windows
</ul>
<br>
Developped using Firefox 2.0 + Firebug 1.0. Tests successfully passed on SAFARI win 3.0, Firefox 3 (latest alpha), IE6 and IE7.
<br><br>
That's all folks,
<br><br>
happy dhteumeuleuing :)
<br><br>
GF Nov 2007
<br><br>
<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
<br><br></div>

</div>
						<br>
						<div class="clear blank10"></div>
						上一篇： <a href="/thread-3681-1.html" title="鼠标事件之游来游去的小鱼">鼠标事件之游来游去的小鱼</a><br>
						下一篇：<a href="/thread-3683-1.html" title="元素周期表">元素周期表</a>
						<div class="clear"></div>
					</div>
				</div>
			</div>
        </div>
    </div>

<div class="footer wow animated fadeInUp">
    <div class="mainbox container clearfix">
        <div class="foot_l fl">
            <i class="title">联系我们</i>
            <div class="footer_address">长沙高新开发区像素大厦(上门请先电话预约)</div>
            <em class="foooter_phone">0731-84469346/15274839229</em>
            <span class="sm-hide">0731-84469346</span>

<p class="mld" >用心打造长沙网站制作优秀品牌，用心服务 <br>携手共赢！</p>
          <P class="mld">在线QQ技术服务中心：  点击对话
			  <a 
target=blank href=tencent://message/?uin=273039264&Site=龙帝网络科技&Menu=yes  ><font class="red">273039264</font></a> 
<a target=blank href=tencent://message/?uin=95018369&Site=龙帝网络科技&Menu=yes ><font class="red">95018369</font></a> 
<a target=blank href=tencent://message/?uin=975371319&Site=龙帝网络科技&Menu=yes ><font class="red">975371319</font></a></p>
        </div>
        <div class="foot_c fl">
            <div class="title">信息导航</div>
            <div class="aboutlist">
 <a href="http://www.ld99.cn/list-1689.html" target="_blank">经典案例</a>
 <a href="http://www.ld99.cn/list-1692.html" target="_blank">新闻动态</a>
 <a href="http://www.ld99.cn/list-1690.html" target="_blank">公司简介</a>
 <a href="http://www.ld99.cn/list-1690.html#wh" target="_blank">企业文化</a>            
 <a href="http://www.ld99.cn/list-1690.html#zp" target="_blank">加入我们</a>
 <a href="http://www.ld99.cn/list-1691.html" target="_blank">联系我们</a>
            </div>
        </div>
        <div class="foot_r fr">
            <div class="title">关注公众号</div>
            <div class="aboutlist"><img src="/ld/images/weixi.jpg"></div>
        </div>
    </div>
    <div class="mainbox container copyright clearfix">
       
        <span class="span_l fl" >Copyright ©2023 长沙龙帝网络科技有限公司 版权所有   <a href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank">湘ICP备2023008034号</a>
 <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=43019002001179" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="http://kj.zhzszq.com/i.png" style="float:left;"/> 湘公网安备 
43019002001180号</a>
</span>

<span class="span_r fr"><a href="http://www.ld99.cn">长沙网站设计</a> | <a href="http://www.ld99.cn">长沙手机网站建设</a> | <a href="http://www.ld99.cn">长沙网站优化</a> |  <a href="
http://www.ld99.cn">长沙网站备案</a> <a href="http://www.ld99.cn">长沙做网站的公司</a></span>
    </div>
</div>

<script src='/js/jquery.js'></script>
<script src="/js/index.js"></script>
<script type="text/javascript" src="/ld/js/script.js"></script>

}
pageAnimate('.page-animate');

//设置选中
	(function($a) {

var href = location.href,
        target;
    if (location.search != '') {
        href = href.split(location.search)[0]
    }
    
    for (var i = 0; i < $a.length; i++) {
        var thisHref = $a[i].href;
        if (thisHref == href) {
            target = $a[i];
            break;
        };

}

var $li = $(target).parent(),
        $menu = $(target).parents('.dropdown-menu');
    if ($menu.length != 0) {

$li = $menu.parent()

}

$li.addClass('active').siblings().removeClass('active');

})($('.nav-box').find('a'));

</script>
<script>
    function relyLoadedCallBackInPage(){
  $('.page-timer').each(count);
      $('.case-tab').find('li').eq('0').addClass('curr').siblings().removeClass('curr')
      $('.case-box').find('.case-welcome').each(function () {
         var _value = $(this).attr('data-base'); 
        if(_value == 0){
            $(this).removeAttr("href");
            $(this).hide()
        }
    })
    $('.case-right a').click(function(){
            $('#qidian_wpa_2852156247_26').contents().find('.btn-area').click()
        })
    var mySwiper =  new Swiper('.swiper-container', {
       
        slidesPerView: 6,
        paginationClickable: true,
        spaceBetween: 15,
         breakpoints: {
            //宽度小于1024的时候
            768: {
                slidesPerView: 4,
                spaceBetween: 10
            },
       
        }

});
}
</script>
</body>
</html>