Use overflow:auto instead of scroll
This commit is contained in:
parent
313f62d2f8
commit
9ca1539ab4
@ -7,7 +7,7 @@
|
|||||||
<script src="../dist/js/perfect-scrollbar.js"></script>
|
<script src="../dist/js/perfect-scrollbar.js"></script>
|
||||||
<style>
|
<style>
|
||||||
h1 { text-align: center; }
|
h1 { text-align: center; }
|
||||||
.container { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: scroll; }
|
.container { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
|
||||||
.container .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
.container .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
||||||
</style>
|
</style>
|
||||||
<style>
|
<style>
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
<title>perfect-scrollbar example</title>
|
<title>perfect-scrollbar example</title>
|
||||||
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
|
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
|
||||||
<style>
|
<style>
|
||||||
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
|
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px;}
|
||||||
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
||||||
.spacer { text-align:center }
|
.spacer { text-align:center }
|
||||||
</style>
|
</style>
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||||
<script src="../dist/js/perfect-scrollbar.jquery.js"></script>
|
<script src="../dist/js/perfect-scrollbar.jquery.js"></script>
|
||||||
<style>
|
<style>
|
||||||
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: scroll; }
|
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
|
||||||
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
||||||
.spacer { text-align:center }
|
.spacer { text-align:center }
|
||||||
</style>
|
</style>
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
|
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
|
||||||
<script src="../dist/js/perfect-scrollbar.js"></script>
|
<script src="../dist/js/perfect-scrollbar.js"></script>
|
||||||
<style>
|
<style>
|
||||||
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: scroll; }
|
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
|
||||||
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
||||||
.spacer { text-align:center }
|
.spacer { text-align:center }
|
||||||
</style>
|
</style>
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
|
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
|
||||||
<script src="../dist/js/perfect-scrollbar.js"></script>
|
<script src="../dist/js/perfect-scrollbar.js"></script>
|
||||||
<style>
|
<style>
|
||||||
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 640px; height: 360px; overflow: scroll; }
|
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 640px; height: 360px; overflow: auto; }
|
||||||
.contentHolder .content { background-image: url('./azusa.jpg'); width: 12800px; height: 7200px; }
|
.contentHolder .content { background-image: url('./azusa.jpg'); width: 12800px; height: 7200px; }
|
||||||
.spacer { text-align:center }
|
.spacer { text-align:center }
|
||||||
</style>
|
</style>
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
|
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
|
||||||
<script src="../dist/js/perfect-scrollbar.js"></script>
|
<script src="../dist/js/perfect-scrollbar.js"></script>
|
||||||
<style>
|
<style>
|
||||||
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: scroll; }
|
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
|
||||||
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
||||||
.spacer { text-align:center }
|
.spacer { text-align:center }
|
||||||
h2 { text-align: center; }
|
h2 { text-align: center; }
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
|
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
|
||||||
<script src="../dist/js/perfect-scrollbar.js"></script>
|
<script src="../dist/js/perfect-scrollbar.js"></script>
|
||||||
<style>
|
<style>
|
||||||
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 640px; height: 360px; overflow: scroll; }
|
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 640px; height: 360px; overflow: auto; }
|
||||||
.contentHolder .content-x { background-image: url('./azusa.jpg'); width: 1920px; height: 360px; }
|
.contentHolder .content-x { background-image: url('./azusa.jpg'); width: 1920px; height: 360px; }
|
||||||
.contentHolder .content-y { background-image: url('./azusa.jpg'); width: 640px; height: 1080px; }
|
.contentHolder .content-y { background-image: url('./azusa.jpg'); width: 640px; height: 1080px; }
|
||||||
.spacer { text-align:center; }
|
.spacer { text-align:center; }
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
|
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
|
||||||
<script src="../dist/js/perfect-scrollbar.js"></script>
|
<script src="../dist/js/perfect-scrollbar.js"></script>
|
||||||
<style>
|
<style>
|
||||||
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: scroll; }
|
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
|
||||||
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
||||||
.spacer { text-align:center }
|
.spacer { text-align:center }
|
||||||
</style>
|
</style>
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
|
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
|
||||||
<script src="../dist/js/perfect-scrollbar.js"></script>
|
<script src="../dist/js/perfect-scrollbar.js"></script>
|
||||||
<style>
|
<style>
|
||||||
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: scroll; }
|
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
|
||||||
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
||||||
.spacer { text-align:center }
|
.spacer { text-align:center }
|
||||||
</style>
|
</style>
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
border: 1px solid gray;
|
border: 1px solid gray;
|
||||||
height:150px;
|
height:150px;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
overflow: scroll;
|
overflow: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
#status { color: red; }
|
#status { color: red; }
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
border: 1px solid gray;
|
border: 1px solid gray;
|
||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
overflow: scroll;
|
overflow: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
#test .element {
|
#test .element {
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
|
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
|
||||||
<script src="../dist/js/perfect-scrollbar.js"></script>
|
<script src="../dist/js/perfect-scrollbar.js"></script>
|
||||||
<style>
|
<style>
|
||||||
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: scroll; }
|
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
|
||||||
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
||||||
.spacer { text-align:center }
|
.spacer { text-align:center }
|
||||||
|
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
|
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
|
||||||
<script src="../dist/js/perfect-scrollbar.js"></script>
|
<script src="../dist/js/perfect-scrollbar.js"></script>
|
||||||
<style>
|
<style>
|
||||||
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: scroll; }
|
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
|
||||||
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
||||||
.spacer { text-align:center }
|
.spacer { text-align:center }
|
||||||
|
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
|
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
|
||||||
<script src="../dist/js/perfect-scrollbar.js"></script>
|
<script src="../dist/js/perfect-scrollbar.js"></script>
|
||||||
<style>
|
<style>
|
||||||
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: scroll; }
|
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
|
||||||
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
||||||
.spacer { text-align:center }
|
.spacer { text-align:center }
|
||||||
|
|
||||||
|
@ -17,7 +17,7 @@
|
|||||||
}
|
}
|
||||||
#table tbody {
|
#table tbody {
|
||||||
height: 100px;
|
height: 100px;
|
||||||
overflow-y: scroll;
|
overflow-y: auto;
|
||||||
overflow-x:hidden;
|
overflow-x:hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
border: 1px solid gray;
|
border: 1px solid gray;
|
||||||
height:150px;
|
height:150px;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
overflow: scroll;
|
overflow: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user