ScrollBars V2整理

最新推荐文章于 2025-08-23 02:53:08 发布

bingdongguke1

最新推荐文章于 2025-08-23 02:53:08 发布

阅读量74

点赞数

文章标签： javascript php ViewUI

本文展示如何使用jQuery Scrollbars插件实现不同样式的滚动条，并提供了详细的代码示例及配置选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML5>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>jQuery Scrollbars</title>
<style type="text/css">
body {
padding: 10px;
}
.scroll {
width: 300px;
height: 180px;
overflow: scroll;
margin-right: 30px;
}
.demo {
float: left;
}
ul, li {
margin: 10px 0px;
}
ul ul {
list-style-type: square;
}
li a {
color: #555;
text-decoration: none;
font-weight: bold;
border-bottom: 1px dashed #555;
}
li a:hover {
color: #333;
border-bottom-color: #333;
}
body {
font-family: 'Helvetica Neue', Arial;
background: #fafafa;
color: #555;
text-shadow: 0px 1px 0px #fff;
}

p {
line-height: 120%;
color: #333;
}

p strong {
color: #555;
}
</style>
<link rel="stylesheet" href="http://old.nath.is/jQScrollbars/jquery.scrollbars.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>
<script src="http://old.nath.is/jQScrollbars/tags.php" type="text/javascript"></script>
<script type="text/javascript" src="http://old.nath.is/jQScrollbars/jquery.scrollbars.min.js"></script>
<script type="text/javascript">
function init() {
$('.normal').scrollbars();
$('.autohide').scrollbars({scrollbarAutohide:true});
$('.dragheight').scrollbars({draggerSize:100});
versions = $.parseJSON(getVersions());
downloads = $('#download').next();

$.each(versions, function(i, version) {
con = $(document.createElement('li'));
if (i > 1) {
if (i == 2) {
a = $(document.createElement('a'));
a.attr('href', 'download.html');
a.html('More Versions...');
con.append(a);
downloads.append(con);
}
return;
}
title = $(document.createElement('strong'));
name = "Version " + version.name.substr(1);
title.html(name);
con.append(title);

links = $(document.createElement('ul'));

if (version.change_url !== undefined) {
changeC = $(document.createElement('li'));
changeA = $(document.createElement('a'));
changeA.attr('href', version.change_url);
changeA.html('Changelog');
changeC.append(changeA);
links.append(changeC);
}

zipC = $(document.createElement('li'));
zipA = $(document.createElement('a'));
zipA.attr('href', version.zipball_url);
zipA.html('Zip');
zipC.append(zipA);
links.append(zipC);

tarC = $(document.createElement('li'));
tarA = $(document.createElement('a'));
tarA.attr('href', version.tarball_url);
tarA.html('Tarball');
tarC.append(tarA);
links.append(tarC);

con.append(links);
downloads.append(con);
});
}

function getHead() {
if (typeof document.h == 'undefined') {
document.h = document.getElementsByTagName('head')[0];
}
return document.h;
}

function loadScript(src, callback) {
var script = document.createElement('script'),
scope = this;
script.src = src;
script.type = 'text/javascript';

if (callback) {
script.onload = function() {
callback.call(scope);
}
script.onreadystatechange = function() {
if ((this.readyState == 'complete' || this.readyState == 'loaded') && !$(this).data('loaded')) {
$(this).data('loaded', true);
callback.call(scope);
}
}
}

getHead().appendChild(script);
return script;
}

function loadStyle(src, callback) {
var style = document.createElement('link'),
scope = this;
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = src;

var sheet, cssRules;
if ( 'sheet' in style) {
sheet = 'sheet'; cssRules = 'cssRules';
}
else {
sheet = 'styleSheet'; cssRules = 'rules';
}

var interval_id = setInterval(function() {
if (style[sheet]) {
clearInterval(interval_id);

if (callback) {
callback.call(scope);
}
}
}, 10);

getHead().appendChild(style);
return style;
}

$(init);
</script>
</head>
<body>
原示例链接：http://nathggns.github.com/Scrollbars/
<h1 id="demo">Demo</h1>
<div class="demo">
<h3>Default</h3>
<div class="scroll normal">
<img src="http://www.getthebigpicture.net/storage/jbaldwin/hawaii8.jpg?__SQUARESPACE_CACHEVERSION=1304222222297" />
</div>
</div>
<div class="demo">
<h3>Default</h3>
<div class="scroll normal">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="demo">
<h3>Autohide</h3>
<div class="scroll autohide">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="demo">
<h3>100px drag height</h3>
<div class="scroll dragheight">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div style="clear:both;height:1px;width:100%"> </div>
</body>
</html>
<script></script>
<style>

.GoEdit{opacity: 0; position: fixed; top: -1px; right: -1px; padding: 5px 10px; background-color: rgb(204, 204, 204); color: rgb(51, 51, 51); text-shadow: rgb(255, 255, 255) 0px 1px 1px; border-top-right-radius: 5px; border: 1px solid rgb(153, 153, 153); text-decoration: none; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-family: 'Helvetica Neue', Arial, Helvetica; -webkit-transition: opacity 100ms ease-out; background-position: initial initial; background-repeat: initial initial; }
</style>
<script type="text/javascript" src="/tools/jsbin/edit.js"></script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F2b9232a7b0ced15280772333a4ec7c3a' type='text/javascript'%3E%3C/script%3E"));
</script>