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

Compare commits

base: cartodb4:0.6.11
Branches Tags
cartodb4:master
cartodb4:v0.6.17 cartodb4:0.6.16 cartodb4:0.6.15 cartodb4:0.6.14 cartodb4:0.6.13 cartodb4:0.6.12 cartodb4:0.6.11 cartodb4:0.6.10 cartodb4:0.6.9 cartodb4:0.6.8 cartodb4:0.6.7 cartodb4:0.6.6 cartodb4:0.6.5 cartodb4:0.6.4 cartodb4:0.6.3 cartodb4:0.6.2 cartodb4:0.6.1 cartodb4:0.6.0 cartodb4:0.5.9 cartodb4:0.5.8 cartodb4:0.5.7 cartodb4:0.5.6 cartodb4:0.5.5 cartodb4:0.5.4 cartodb4:0.5.3 cartodb4:0.5.2 cartodb4:0.5.1 cartodb4:0.4.11 cartodb4:0.4.10 cartodb4:0.4.9 cartodb4:0.4.8 cartodb4:0.4.7 cartodb4:0.4.6 cartodb4:0.4.5 cartodb4:0.4.4 cartodb4:0.4.3 cartodb4:0.4.2 cartodb4:0.4.1 cartodb4:0.3.4 cartodb4:0.3.3 cartodb4:0.3.2 cartodb4:0.3.1 cartodb4:0.2.5 cartodb4:0.2.4 cartodb4:0.2.3 cartodb4:0.2.2 cartodb4:0.2.1
...
compare: cartodb4:0.6.12
Branches Tags
cartodb4:master
cartodb4:v0.6.17 cartodb4:0.6.16 cartodb4:0.6.15 cartodb4:0.6.14 cartodb4:0.6.13 cartodb4:0.6.12 cartodb4:0.6.11 cartodb4:0.6.10 cartodb4:0.6.9 cartodb4:0.6.8 cartodb4:0.6.7 cartodb4:0.6.6 cartodb4:0.6.5 cartodb4:0.6.4 cartodb4:0.6.3 cartodb4:0.6.2 cartodb4:0.6.1 cartodb4:0.6.0 cartodb4:0.5.9 cartodb4:0.5.8 cartodb4:0.5.7 cartodb4:0.5.6 cartodb4:0.5.5 cartodb4:0.5.4 cartodb4:0.5.3 cartodb4:0.5.2 cartodb4:0.5.1 cartodb4:0.4.11 cartodb4:0.4.10 cartodb4:0.4.9 cartodb4:0.4.8 cartodb4:0.4.7 cartodb4:0.4.6 cartodb4:0.4.5 cartodb4:0.4.4 cartodb4:0.4.3 cartodb4:0.4.2 cartodb4:0.4.1 cartodb4:0.3.4 cartodb4:0.3.3 cartodb4:0.3.2 cartodb4:0.3.1 cartodb4:0.2.5 cartodb4:0.2.4 cartodb4:0.2.3 cartodb4:0.2.2 cartodb4:0.2.1

10 Commits
0.6.11 ... 0.6.12

Author SHA1 Message Date
Jun
985980a892 Release 0.6.12 
1. Fix scrolling for multiple select
2. Change default scrollbar theme
3. Minor bug fixes
 2016-07-13 02:28:31 +09:00
Jun
fdc8d64fd9 Fix custom-theme example to be more useful 
Not it provides a meaningful example. It also just includes pre-built
css file for the example.
 2016-07-13 01:13:08 +09:00
Jun
26852236cc Enhance 'scale scrollbars on hover' feature 
Now it's set as default, with a little different form of settings.
 2016-07-13 01:13:08 +09:00
Jun
e0510b5fad Merge pull request #513 from cdriscol/trackbar_scaling 
Add theme option to scale (grow) rails on hover
 2016-07-13 01:12:44 +09:00
Jun
838ccbba77 Make defaultPrevented condition more readable 2016-06-23 10:05:56 +09:00
Jun
4198b23231 Merge pull request #525 from howey-aus/use-native-default-prevented 
On keydown, check for e.isDefaultPrevented() [jquery] and e.defaultPrevented [native]
 2016-06-23 10:04:22 +09:00
Dan Howe
3eb2a49109 e.isDefaultPrevented is a jQuery property, but the event passed might be a native browser event, so we should also check for "defaultPrevented" if the jQuery props don't exist. 2016-06-23 10:11:18 +10:00
Chris Driscol
1b2c853972 Hover scaling now sets width and height on scrollbar to 100% on hover. 2016-06-14 23:07:00 -06:00
Chris Driscol
e9d7cc97c8 Adding custom-theme scss used for custom-theme example. Added ability to set a hover scale size in the theme which will scale the X and Y rails when hovered. 2016-06-01 16:50:34 -06:00
Jun
9016f207e9 Fix scrolling for multiple select 
Solve #481
 2016-05-27 02:25:51 +09:00
9 changed files with 246 additions and 17 deletions
Expand all files Collapse all files

190
examples/custom-theme.css Normal file
View File

@@ -0,0 +1,190 @@
.ps-container {
-ms-touch-action: none;
touch-action: none;
overflow: hidden !important;
-ms-overflow-style: none; }
@supports (-ms-overflow-style: none) {
.ps-container {
overflow: auto !important; } }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.ps-container {
overflow: auto !important; } }
.ps-container.ps-active-x > .ps-scrollbar-x-rail,
.ps-container.ps-active-y > .ps-scrollbar-y-rail {
display: block;
background-color: transparent; }
.ps-container.ps-in-scrolling {
pointer-events: none; }
.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
background-color: #eee;
opacity: 0.9; }
.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
background-color: #999; }
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
background-color: #eee;
opacity: 0.9; }
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
background-color: #999; }
.ps-container > .ps-scrollbar-x-rail {
display: none;
position: absolute;
/* please don't change 'position' */
opacity: 0;
transition: background-color .2s linear, opacity .2s linear;
bottom: 0px;
/* there must be 'bottom' for ps-scrollbar-x-rail */
height: 15px; }
.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
position: absolute;
/* please don't change 'position' */
background-color: #aaa;
border-radius: 6px;
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
bottom: 2px;
/* there must be 'bottom' for ps-scrollbar-x */
height: 6px; }
.ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
height: 11px; }
.ps-container > .ps-scrollbar-y-rail {
display: none;
position: absolute;
/* please don't change 'position' */
opacity: 0;
transition: background-color .2s linear, opacity .2s linear;
right: 0;
/* there must be 'right' for ps-scrollbar-y-rail */
width: 15px; }
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
position: absolute;
/* please don't change 'position' */
background-color: #aaa;
border-radius: 6px;
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
right: 2px;
/* there must be 'right' for ps-scrollbar-y */
width: 6px; }
.ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
width: 11px; }
.ps-container:hover.ps-in-scrolling {
pointer-events: none; }
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
background-color: #eee;
opacity: 0.9; }
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
background-color: #999; }
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
background-color: #eee;
opacity: 0.9; }
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
background-color: #999; }
.ps-container:hover > .ps-scrollbar-x-rail,
.ps-container:hover > .ps-scrollbar-y-rail {
opacity: 0.6; }
.ps-container:hover > .ps-scrollbar-x-rail:hover {
background-color: #eee;
opacity: 0.9; }
.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
background-color: #999; }
.ps-container:hover > .ps-scrollbar-y-rail:hover {
background-color: #eee;
opacity: 0.9; }
.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
background-color: #999; }
/*
this file is built into custom-theme.css
$ node-sass examples/custom-theme.scss -o examples/
*/
.ps-theme-square {
-ms-touch-action: none;
touch-action: none;
overflow: hidden !important;
-ms-overflow-style: none; }
@supports (-ms-overflow-style: none) {
.ps-theme-square {
overflow: auto !important; } }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.ps-theme-square {
overflow: auto !important; } }
.ps-theme-square.ps-active-x > .ps-scrollbar-x-rail,
.ps-theme-square.ps-active-y > .ps-scrollbar-y-rail {
display: block;
background-color: transparent; }
.ps-theme-square.ps-in-scrolling {
pointer-events: none; }
.ps-theme-square.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
background-color: #eee;
opacity: 0.9; }
.ps-theme-square.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
background-color: #999; }
.ps-theme-square.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
background-color: #eee;
opacity: 0.9; }
.ps-theme-square.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
background-color: #999; }
.ps-theme-square > .ps-scrollbar-x-rail {
display: none;
position: absolute;
/* please don't change 'position' */
opacity: 0;
transition: background-color .2s linear, opacity .2s linear;
bottom: 0;
/* there must be 'bottom' for ps-scrollbar-x-rail */
height: 10px; }
.ps-theme-square > .ps-scrollbar-x-rail > .ps-scrollbar-x {
position: absolute;
/* please don't change 'position' */
background-color: #aaa;
border-radius: 0;
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
bottom: 0;
/* there must be 'bottom' for ps-scrollbar-x */
height: 10px; }
.ps-theme-square > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-theme-square > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
height: 10px; }
.ps-theme-square > .ps-scrollbar-y-rail {
display: none;
position: absolute;
/* please don't change 'position' */
opacity: 0;
transition: background-color .2s linear, opacity .2s linear;
right: 0;
/* there must be 'right' for ps-scrollbar-y-rail */
width: 10px; }
.ps-theme-square > .ps-scrollbar-y-rail > .ps-scrollbar-y {
position: absolute;
/* please don't change 'position' */
background-color: #aaa;
border-radius: 0;
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
right: 0;
/* there must be 'right' for ps-scrollbar-y */
width: 10px; }
.ps-theme-square > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-theme-square > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
width: 10px; }
.ps-theme-square:hover.ps-in-scrolling {
pointer-events: none; }
.ps-theme-square:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
background-color: #eee;
opacity: 0.9; }
.ps-theme-square:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
background-color: #999; }
.ps-theme-square:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
background-color: #eee;
opacity: 0.9; }
.ps-theme-square:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
background-color: #999; }
.ps-theme-square:hover > .ps-scrollbar-x-rail,
.ps-theme-square:hover > .ps-scrollbar-y-rail {
opacity: 0.6; }
.ps-theme-square:hover > .ps-scrollbar-x-rail:hover {
background-color: #eee;
opacity: 0.9; }
.ps-theme-square:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
background-color: #999; }
.ps-theme-square:hover > .ps-scrollbar-y-rail:hover {
background-color: #eee;
opacity: 0.9; }
.ps-theme-square:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
background-color: #999; }

6
examples/custom-theme.html
View File

@@ -3,10 +3,10 @@
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
<link href="custom-theme.css" rel="stylesheet">
<script src="../dist/js/perfect-scrollbar.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
.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; }
</style>
</head>
@@ -19,7 +19,7 @@
var $ = document.querySelector.bind(document);
window.onload = function () {
Ps.initialize($('#Default'), {
theme: 'big-and-ugly'
theme: 'square'
});
};
</script>

23
examples/custom-theme.scss Normal file
View File

@@ -0,0 +1,23 @@
@import '../src/css/main';
/*
this file is built into custom-theme.css
$ node-sass examples/custom-theme.scss -o examples/
*/
.ps-theme-square {
@include ps-container(map-merge($ps-theme-default, (
border-radius: 0,
scrollbar-x-rail-bottom: 0,
scrollbar-x-rail-height: 10px,
scrollbar-x-bottom: 0,
scrollbar-x-height: 10px,
scrollbar-x-hover-height: 10px,
scrollbar-y-rail-right: 0,
scrollbar-y-rail-width: 10px,
scrollbar-y-right: 0,
scrollbar-y-width: 10px,
scrollbar-y-hover-width: 10px,
)));
}

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "perfect-scrollbar",
"version": "0.6.11",
"version": "0.6.12",
"description": "Minimalistic but perfect custom scrollbar plugin",
"author": "Hyunje Alex Jun <me@noraesae.net>",
"contributors": [

16
src/css/mixins.scss
View File

@@ -1,7 +1,6 @@
@mixin scrollbar-rail-default($theme) {
display: none;
position: absolute; /* please don't change 'position' */
border-radius: map_get($theme, border-radius);
opacity: map_get($theme, rail-default-opacity);
transition: background-color .2s linear, opacity .2s linear;
}
@@ -15,7 +14,8 @@
position: absolute; /* please don't change 'position' */
background-color: map_get($theme, bar-container-hover-bg);
border-radius: map_get($theme, border-radius);
transition: background-color .2s linear;
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out,
border-radius .2s ease-in-out;
}
@mixin scrollbar-hover($theme) {
@@ -74,6 +74,12 @@
bottom: map_get($theme, scrollbar-x-bottom); /* there must be 'bottom' for ps-scrollbar-x */
height: map_get($theme, scrollbar-x-height);
}
&:hover,
&:active {
> .ps-scrollbar-x {
height: map_get($theme, scrollbar-x-hover-height);
}
}
}
> .ps-scrollbar-y-rail {
@@ -86,6 +92,12 @@
right: map_get($theme, scrollbar-y-right); /* there must be 'right' for ps-scrollbar-y */
width: map_get($theme, scrollbar-y-width);
}
&:hover,
&:active {
> .ps-scrollbar-y {
width: map_get($theme, scrollbar-y-hover-width);
}
}
}
&:hover {

2
src/css/themes.scss
View File

@@ -11,10 +11,12 @@ $ps-theme-default: (
scrollbar-x-rail-height: $ps-scrollbar-x-rail-height,
scrollbar-x-bottom: $ps-scrollbar-x-bottom,
scrollbar-x-height: $ps-scrollbar-x-height,
scrollbar-x-hover-height: $ps-scrollbar-x-hover-height,
scrollbar-y-rail-right: $ps-scrollbar-y-rail-right,
scrollbar-y-rail-width: $ps-scrollbar-y-rail-width,
scrollbar-y-right: $ps-scrollbar-y-right,
scrollbar-y-width: $ps-scrollbar-y-width,
scrollbar-y-hover-width: $ps-scrollbar-y-hover-width,
);
// Default theme

20
src/css/variables.scss
View File

@@ -1,5 +1,5 @@
// Colors
$ps-border-radius: 4px !default;
$ps-border-radius: 6px !default;
$ps-rail-default-opacity: 0 !default;
$ps-rail-container-hover-opacity: 0.6 !default;
@@ -11,12 +11,14 @@ $ps-bar-hover-bg: #999 !default;
$ps-rail-hover-bg: #eee !default;
// Sizes
$ps-scrollbar-x-rail-bottom: 3px !default;
$ps-scrollbar-x-rail-height: 8px !default;
$ps-scrollbar-x-bottom: 0 !default;
$ps-scrollbar-x-height: 8px !default;
$ps-scrollbar-x-rail-bottom: 0px !default;
$ps-scrollbar-x-rail-height: 15px !default;
$ps-scrollbar-x-bottom: 2px !default;
$ps-scrollbar-x-height: 6px !default;
$ps-scrollbar-x-hover-height: 11px !default;
$ps-scrollbar-y-rail-right: 3px !default;
$ps-scrollbar-y-rail-width: 8px !default;
$ps-scrollbar-y-right: 0 !default;
$ps-scrollbar-y-width: 8px !default;
$ps-scrollbar-y-rail-right: 0 !default;
$ps-scrollbar-y-rail-width: 15px !default;
$ps-scrollbar-y-right: 2px !default;
$ps-scrollbar-y-width: 6px !default;
$ps-scrollbar-y-hover-width: 11px !default;

2
src/js/plugin/handler/keyboard.js
View File

@@ -40,7 +40,7 @@ function bindKeyboardHandler(element, i) {
}
i.event.bind(i.ownerDocument, 'keydown', function (e) {
if (e.isDefaultPrevented && e.isDefaultPrevented()) {
if ((e.isDefaultPrevented && e.isDefaultPrevented()) || e.defaultPrevented) {
return;
}

2
src/js/plugin/handler/mouse-wheel.js
View File

@@ -56,7 +56,7 @@ function bindMouseWheelHandler(element, i) {
}
function shouldBeConsumedByChild(deltaX, deltaY) {
var child = element.querySelector('textarea:hover, .ps-child:hover');
var child = element.querySelector('textarea:hover, select[multiple]:hover, .ps-child:hover');
if (child) {
if (child.tagName !== 'TEXTAREA' && !window.getComputedStyle(child).overflow.match(/(scroll|auto)/)) {
return false;