cartodb4
/
perfect-scrollbar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rewrite examples with a native JavaScript version.

Browse Source
master
Hyunje Alex Jun 10 years ago
parent 89c3bdb1cf
commit 48eb80bd7f
16 changed files with 294 additions and 269 deletions
Show Stats Download Patch File Download Diff File

46
examples/always-visible.html
Unescape View File

@ -1,29 +1,22 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../out/js/perfect-scrollbar.js"></script>
<style>
h1 { text-align: center; }
.container { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
.container .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
</style>
<style>
/* to make scrollbars always visible */
.always-visible.ps-container > .ps-scrollbar-x-rail,
.always-visible.ps-container > .ps-scrollbar-y-rail {
opacity: 0.6;
}
</style>
<script>
jQuery(document).ready(function ($) {
"use strict";
$('.container').perfectScrollbar();
});
</script>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../out/js/perfect-scrollbar.global.js"></script>
<style>
h1 { text-align: center; }
.container { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
.container .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
</style>
<style>
/* to make scrollbars always visible */
.always-visible.ps-container > .ps-scrollbar-x-rail,
.always-visible.ps-container > .ps-scrollbar-y-rail {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>Default</h1>
@ -37,5 +30,12 @@
<div class="content">
</div>
</div>
<script>
window.onload = function () {
[].forEach.call(document.querySelectorAll('.container'), function (el) {
Ps.initialize(el);
});
};
</script>
</body>
</html>

4
examples/iframe-content.html
Unescape View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<style>

33
examples/iframe.html
Unescape View File

@ -1,27 +1,22 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../out/js/perfect-scrollbar.js"></script>
<style>
#iframe { width: 100%; min-height: 450px; border: 0; }
html { direction: rtl; }
</style>
<script>
jQuery(document).ready(function ($) {
"use strict";
$('#iframe').load(function() {
var contentIframe = $(this).contents();
var documentIframe = contentIframe.get(0);
$('#Default', documentIframe).perfectScrollbar();
});
});
</script>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../out/js/perfect-scrollbar.global.js"></script>
<style>
#iframe { width: 100%; min-height: 450px; border: 0; }
html { direction: rtl; }
</style>
</head>
<body>
<iframe src="iframe-content.html" id="iframe"></iframe>
<script>
var iframe = document.querySelector('#iframe');
iframe.onload = function () {
Ps.initialize(iframe.contentDocument.querySelector('#Default'))
};
</script>
</body>
</html>

40
examples/jquery.html
Unescape View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../out/js/perfect-scrollbar.jquery.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center }
</style>
</head>
<body>
<h1 style="text-align:center">Default; wheelSpeed:1</h1>
<div id="Default" class="contentHolder">
<div class="content">
</div>
</div>
<h1 style="text-align:center">Fast: wheelSpeed:10</h1>
<div id="FastWheelSpeed" class="contentHolder">
<div class="content">
</div>
</div>
<h1 style="text-align:center">Slow: wheelSpeed:0.1</h1>
<div id="SlowWheelSpeed" class="contentHolder">
<div class="content">
</div>
</div>
<script>
$(document).ready(function ($) {
$('#Default').perfectScrollbar();
$('#FastWheelSpeed').perfectScrollbar({wheelSpeed: 10});
$('#SlowWheelSpeed').perfectScrollbar({wheelSpeed: 0.1});
});
</script>
</body>
</html>

44
examples/options-default.html
Unescape View File

@ -1,27 +1,15 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../out/js/perfect-scrollbar.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center }
</style>
<script>
jQuery(document).ready(function ($) {
"use strict";
$('#Default').perfectScrollbar();
});
var updateSize = function () {
var width = parseInt($('#width').val(), 10);
var height = parseInt($('#height').val(), 10);
$('#Default').width(width).height(height).perfectScrollbar('update');
};
</script>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../out/js/perfect-scrollbar.global.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center }
</style>
</head>
<body>
<div id="Default" class="contentHolder">
@ -33,6 +21,20 @@
Height <input type='text' id='height' value='400'>
<button onclick='updateSize()'>Change!</button>
</p>
<script>
var $ = document.querySelector.bind(document);
window.onload = function () {
Ps.initialize($('#Default'));
};
var updateSize = function () {
var width = parseInt($('#width').value, 10);
var height = parseInt($('#height').value, 10);
var container = $('#Default');
container.style.width = width + 'px';
container.style.height = height + 'px';
Ps.update(document.querySelector('#Default'));
};
</script>
</body>
</html>

33
examples/options-minScrollbarLength.html
Unescape View File

@ -1,23 +1,15 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../out/js/perfect-scrollbar.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 640px; height: 360px; overflow: hidden; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 12800px; height: 7200px; }
.spacer { text-align:center }
</style>
<script>
jQuery(document).ready(function ($) {
"use strict";
$('#Default').perfectScrollbar();
$('#LongThumb').perfectScrollbar({minScrollbarLength:100});
});
</script>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../out/js/perfect-scrollbar.global.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 640px; height: 360px; overflow: hidden; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 12800px; height: 7200px; }
.spacer { text-align:center }
</style>
</head>
<body>
<h1 style="text-align:center">No minimum</h1>
@ -30,5 +22,12 @@
<div class="content">
</div>
</div>
<script>
var $ = document.querySelector.bind(document);
window.onload = function () {
Ps.initialize($('#Default'));
Ps.initialize($('#LongThumb'), {minScrollbarLength: 100});
};
</script>
</body>
</html>

38
examples/options-suppressScrollAxis.html
Unescape View File

@ -1,25 +1,16 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../out/js/perfect-scrollbar.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center }
h2 { text-align: center; }
</style>
<script>
jQuery(document).ready(function ($) {
"use strict";
$('#Default').perfectScrollbar();
$('#SuppressScrollX').perfectScrollbar({suppressScrollX: true});
$('#SuppressScrollY').perfectScrollbar({suppressScrollY: true});
});
</script>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../out/js/perfect-scrollbar.global.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center }
h2 { text-align: center; }
</style>
</head>
<body>
<h2>Default</h2>
@ -37,6 +28,13 @@
<div class="content">
</div>
</div>
<script>
var $ = document.querySelector.bind(document);
window.onload = function () {
Ps.initialize($('#Default'));
Ps.initialize($('#SuppressScrollX'), {suppressScrollX: true});
Ps.initialize($('#SuppressScrollY'), {suppressScrollY: true});
};
</script>
</body>
</html>

37
examples/options-useBothWheelAxes.html
Unescape View File

@ -1,25 +1,16 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../out/js/perfect-scrollbar.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 640px; height: 360px; overflow: hidden; }
.contentHolder .content-x { background-image: url('./azusa.jpg'); width: 1920px; height: 360px; }
.contentHolder .content-y { background-image: url('./azusa.jpg'); width: 640px; height: 1080px; }
.spacer { text-align:center; }
</style>
<script>
jQuery(document).ready(function ($) {
"use strict";
$('#Default').perfectScrollbar();
$('#CanScrollWithYAxis').perfectScrollbar({useBothWheelAxes: true});
$('#CanScrollWithXAxis').perfectScrollbar({useBothWheelAxes: true});
});
</script>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../out/js/perfect-scrollbar.global.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 640px; height: 360px; overflow: hidden; }
.contentHolder .content-x { background-image: url('./azusa.jpg'); width: 1920px; height: 360px; }
.contentHolder .content-y { background-image: url('./azusa.jpg'); width: 640px; height: 1080px; }
.spacer { text-align:center; }
</style>
</head>
<body>
<h1 style="text-align:center">Default.</h1>
@ -37,5 +28,13 @@
<div class="content-y">
</div>
</div>
<script>
var $ = document.querySelector.bind(document);
window.onload = function () {
Ps.initialize($('#Default'));
Ps.initialize($('#CanScrollWithYAxis'), {useBothWheelAxes: true});
Ps.initialize($('#CanScrollWithXAxis'), {useBothWheelAxes: true});
};
</script>
</body>
</html>

35
examples/options-wheelPropagation.html
Unescape View File

@ -1,23 +1,15 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../out/js/perfect-scrollbar.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center }
</style>
<script>
jQuery(document).ready(function ($) {
"use strict";
$('#Default').perfectScrollbar();
$('#NoWheelPropagation').perfectScrollbar({wheelPropagation:true});
});
</script>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../out/js/perfect-scrollbar.global.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center }
</style>
</head>
<body>
<h1 style="text-align:center">Default; wheelPropagation:false</h1>
@ -26,7 +18,7 @@
</div>
</div>
<h1 style="text-align:center">wheelPropagation:true</h1>
<div id="NoWheelPropagation" class="contentHolder">
<div id="WheelPropagation" class="contentHolder">
<div class="content">
</div>
</div>
@ -34,6 +26,13 @@
Note<br>that<br>there<br>is<br>plenty<br>of<br>text<br>after<br>the<br>image<br>to<br>ensure<br>that<br>it<br>is<br>possible<br>to<br>down<br>
after<br>the<br>bottom<br>of<br>the<br>image<br>has<br>been<br>reached<br>to<br>enable<br>the<br>wheel<br>propagation<br>to<br>be<br>tested<br>
</div>
<script>
var $ = document.querySelector.bind(document);
window.onload = function () {
Ps.initialize($('#Default'));
Ps.initialize($('#WheelPropagation'), {wheelPropagation: true});
};
</script>
</body>
</html>

35
examples/options-wheelSpeed.html
Unescape View File

@ -1,24 +1,15 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../out/js/perfect-scrollbar.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center }
</style>
<script>
jQuery(document).ready(function ($) {
"use strict";
$('#Default').perfectScrollbar();
$('#FastWheelSpeed').perfectScrollbar({wheelSpeed:10});
$('#SlowWheelSpeed').perfectScrollbar({wheelSpeed:0.1});
});
</script>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../out/js/perfect-scrollbar.global.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center }
</style>
</head>
<body>
<h1 style="text-align:center">Default; wheelSpeed:1</h1>
@ -36,6 +27,14 @@
<div class="content">
</div>
</div>
<script>
var $ = document.querySelector.bind(document);
window.onload = function () {
Ps.initialize($('#Default'));
Ps.initialize($('#FastWheelSpeed'), {wheelSpeed: 10});
Ps.initialize($('#SlowWheelSpeed'), {wheelSpeed: 0.1});
};
</script>
</body>
</html>

45
examples/reach-the-end-callback.html
Unescape View File

@ -1,12 +1,10 @@
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../out/js/perfect-scrollbar.js"></script>
<script src="../out/js/perfect-scrollbar.global.js"></script>
<style>
#description {
border: 1px solid gray;
@ -15,27 +13,8 @@
overflow: hidden;
position: relative;
}
#status {
color: red;
}
#status { color: red; }
</style>
<script type="text/javascript">
$(document).ready(function ($) {
var $container = $('#description');
var $status = $('#status');
$container.perfectScrollbar();
$container.scroll(function(e) {
if($container.scrollTop() === 0) {
$status.text('it reaches the top!');
}
else if ($container.scrollTop() === $container.prop('scrollHeight') - $container.height()) {
$status.text('it reaches the end!');
} else {
$status.text('');
}
});
});
</script>
</head>
<body>
<div id="description" class="wrapper">
@ -52,5 +31,23 @@
</div>
<div id="status">
</div>
<script type="text/javascript">
var $ = document.querySelector.bind(document);
window.onload = function () {
var container = $('#description');
var stat = $('#status');
Ps.initialize(container);
container.addEventListener('scroll', function (e) {
if(container.scrollTop === 0) {
stat.innerHTML = 'it reaches the top!';
}
else if (container.scrollTop === container.scrollHeight - container.clientHeight) {
stat.innerHTML = 'it reaches the end!';
} else {
stat.innerHTML = '';
}
});
};
</script>
</body>
</html>

29
examples/removable-list-element.html
Unescape View File

@ -1,12 +1,10 @@
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../out/js/perfect-scrollbar.js"></script>
<script src="../out/js/perfect-scrollbar.global.js"></script>
<style>
#test {
border: 1px solid gray;
@ -22,16 +20,6 @@
line-height: 44px;
}
</style>
<script type="text/javascript">
$(document).ready(function ($) {
var test = $('#test');
test.perfectScrollbar();
test.find('a').click(function () {
$(this).parent().remove();
test.perfectScrollbar('update');
});
});
</script>
</head>
<body>
<div id="test" class="wrapper">
@ -48,5 +36,18 @@
<div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
<div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
</div>
<script type="text/javascript">
var $ = document.querySelector.bind(document);
window.onload = function () {
var test = $('#test');
Ps.initialize(test);
[].forEach.call(test.querySelectorAll('.element'), function (el) {
el.querySelector('a').addEventListener('click', function () {
el.parentNode.removeChild(el);
Ps.update(test);
});
});
};
</script>
</body>
</html>

33
examples/rtl.html
Unescape View File

@ -1,29 +1,28 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../out/js/perfect-scrollbar.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center }
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../out/js/perfect-scrollbar.global.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center }
html { direction: rtl; }
</style>
<script>
jQuery(document).ready(function ($) {
"use strict";
$('#Default').perfectScrollbar();
});
</script>
html { direction: rtl; }
</style>
</head>
<body>
<div id="Default" class="contentHolder">
<div class="content">
</div>
</div>
<script>
var $ = document.querySelector.bind(document);
window.onload = function () {
Ps.initialize($('#Default'));
};
</script>
</body>
</html>

51
examples/scrollbars-on-the-opposite-side.html
Unescape View File

@ -1,38 +1,37 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../out/js/perfect-scrollbar.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center }
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../out/js/perfect-scrollbar.global.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center }
/* Change the alignment of scrollbars */
/* Recommended: You can just modify the CSS file directly. */
.ps-container .ps-scrollbar-x-rail {
top: 3px;
bottom: auto; /* If using `top`, there shouldn't be a `bottom`. */
}
.ps-container .ps-scrollbar-y-rail {
left: 3px;
right: auto; /* If using `left`, there shouldn't be a `right`. */
}
</style>
<script>
jQuery(document).ready(function ($) {
"use strict";
$('#Default').perfectScrollbar();
});
</script>
/* Change the alignment of scrollbars */
/* Recommended: You can just modify the CSS file directly. */
.ps-container .ps-scrollbar-x-rail {
top: 3px;
bottom: auto; /* If using `top`, there shouldn't be a `bottom`. */
}
.ps-container .ps-scrollbar-y-rail {
left: 3px;
right: auto; /* If using `left`, there shouldn't be a `right`. */
}
</style>
</head>
<body>
<div id="Default" class="contentHolder">
<div class="content">
</div>
</div>
<script>
var $ = document.querySelector.bind(document);
window.onload = function () {
Ps.initialize($('#Default'));
};
</script>
</body>
</html>

43
examples/scrollbars-with-margin.html
Unescape View File

@ -1,34 +1,33 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../out/js/perfect-scrollbar.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center }
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../out/js/perfect-scrollbar.global.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
.spacer { text-align:center }
.ps-scrollbar-x-rail {
margin: 0 3px;
}
.ps-scrollbar-y-rail {
margin: 3px 0;
}
</style>
<script>
jQuery(document).ready(function ($) {
"use strict";
$('#Default').perfectScrollbar();
});
</script>
.ps-scrollbar-x-rail {
margin: 0 3px;
}
.ps-scrollbar-y-rail {
margin: 3px 0;
}
</style>
</head>
<body>
<div id="Default" class="contentHolder">
<div class="content">
</div>
</div>
<script>
var $ = document.querySelector.bind(document);
window.onload = function () {
Ps.initialize($('#Default'));
};
</script>
</body>
</html>

17
examples/text-content.html
Unescape View File

@ -1,12 +1,10 @@
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../out/css/perfect-scrollbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../out/js/perfect-scrollbar.js"></script>
<script src="../out/js/perfect-scrollbar.global.js"></script>
<style>
#description {
border: 1px solid gray;
@ -16,11 +14,6 @@
position: absolute;
}
</style>
<script type="text/javascript">
$(document).ready(function ($) {
$('#description').perfectScrollbar();
});
</script>
</head>
<body>
<div id="description" class="wrapper">
@ -37,5 +30,11 @@
<p>The command takes options applicable</p>
</div>
</div>
<script>
var $ = document.querySelector.bind(document);
window.onload = function () {
Ps.initialize($('#description'));
};
</script>
</body>
</html>

Write Preview
Loading…
Cancel
Save