<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://www.commot.net/css/style-scroll.css">
<script src="files/jquery.min.js"></script>
<script src="files/jquery.mousewheel.js"></script>
<script src="files/jquery.jscrollpane.min.js"></script>
<script>
$(document).ready(function()
{
var bars = '.jspHorizontalBar, .jspVerticalBar';
$('#scroll-pane').bind('jsp-initialised', function (event, isScrollable) {
//скрываем скроллбар при первой загрузки
$(this).find(bars).hide();
}).jScrollPane().hover(
//показываем скрываем скроллбар
function () {
$(this).find(bars).stop().fadeTo('fast', 0.9);
},
function () {
$(this).find(bars).stop().fadeTo('fast', 0);
}
);
});
</script>
</head>
<body>
<div id="scroll-pane" style="width: 641px; height: 370px; border: 1px solid black;">
<div>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>2<br>
</div>
</div>
</body>
</html>