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

Add an example for the scroll suppression feature.

Browse Source 
The 'suppressScrollX' and 'suppressScrollY' features were added and
this patch add the example for the features.
This commit is contained in:
Hyunje Alex Jun 2013-12-06 11:22:19 +09:00
parent 6595d602b1
commit e390a89f57
1 changed files with 43 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
examples/options-suppressScrollAxis.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>perfect-scrollbar example</title>
<link href="../src/perfect-scrollbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../src/jquery.mousewheel.js"></script>
<script src="../src/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>
</head>
<body>
<h2>Default</h2>
<div id="Default" class="contentHolder">
<div class="content">
</div>
</div>
<h2>suppressScrollX: true</h2>
<div id="SuppressScrollX" class="contentHolder">
<div class="content">
</div>
</div>
<h2>suppressScrollY: true</h2>
<div id="SuppressScrollY" class="contentHolder">
<div class="content">
</div>
</div>
</body>
</html>