0.6.12

mdbootstrap · Mar 24, 2022 · f69bd15 · f69bd15
1 parent 2bd9bf9
commit f69bd15
Show file tree

Hide file tree

Showing 9 changed files with 246 additions and 17 deletions.
diff --git a/examples/custom-theme.css b/examples/custom-theme.css
@@ -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; }
diff --git a/examples/custom-theme.html b/examples/custom-theme.html
@@ -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>

diff --git a/examples/custom-theme.scss b/examples/custom-theme.scss
@@ -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,
+  )));
+}
diff --git a/package.json b/package.json
@@ -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": [

diff --git a/src/css/mixins.scss b/src/css/mixins.scss
@@ -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 {

diff --git a/src/css/themes.scss b/src/css/themes.scss
@@ -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

diff --git a/src/css/variables.scss b/src/css/variables.scss
@@ -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;
diff --git a/src/js/plugin/handler/keyboard.js b/src/js/plugin/handler/keyboard.js
@@ -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;
     }
 

diff --git a/src/js/plugin/handler/mouse-wheel.js b/src/js/plugin/handler/mouse-wheel.js
@@ -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;
-Original file line number
+Diff line change
@@ Expand Up / @@ -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;
         }
@@ Expand Down @@