js小技巧8 带纹理网页滚动条效果

最新推荐文章于 2024-04-24 16:59:31 发布

mahaopengphp

最新推荐文章于 2024-04-24 16:59:31 发布

阅读量345

点赞数

文章标签： function scroll browser div events firefox

本文链接：https://blog.csdn.net/mahaopengphp/article/details/6996617

版权

<!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.com/down/js/images/12476505130.gif);
  right: 0px;
  cursor: pointer;
}
.cds_scrollbar_over {
  background: #aaa url(http://www.lanrentuku.com/down/js/images/12476497481.gif);
}
.cds_scrollbar_pushed {
  background: #fff url(http://www.lanrentuku.com/down/js/images/12476497480.gif);
}
.cds_track {
  position: absolute;
  background: #222 url(http://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.com/down/js/images/12476497483.gif);
  right: 0px;
  top: 0px;
  cursor: pointer;
}
.cds_down {
  position: absolute;
  background: #f60 url(http://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>

</body>
</html>

mahaopengphp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js小技巧8 带纹理网页滚动条效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">超酷带纹理网页滚动条效果 html { overflow: hidden; } body { margin: 0px; padding: 0px; background:
复制链接

扫一扫