block content selection while draggin the scroll handle - fixes rommguy#5

Author: GuyR

example/styles.css

@@ -169,7 +169,6 @@ figure {
  * Address differences between Firefox and other browsers.
  */
 hr {
-  -moz-box-sizing: content-box;
   box-sizing: content-box;
   height: 0; }
 
@@ -298,8 +297,6 @@ input[type="number"]::-webkit-outer-spin-button {
 input[type="search"] {
   -webkit-appearance: textfield;
   /* 1 */
-  -moz-box-sizing: content-box;
-  -webkit-box-sizing: content-box;
   /* 2 */
   box-sizing: content-box; }
 
@@ -361,7 +358,8 @@ th {
   position: relative; }
   .custom-scroll .outer-container:hover .custom-scrollbar {
     opacity: 1;
-    transition-duration: 0.2s; }
+    -webkit-transition-duration: 0.2s;
+            transition-duration: 0.2s; }
 
 .custom-scroll .inner-container {
   overflow-x: hidden;
@@ -373,21 +371,31 @@ th {
     right: 0;
     left: 0;
     height: 0;
+    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.05) 60%, transparent 100%);
     background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.05) 60%, transparent 100%);
     pointer-events: none;
+    -webkit-transition: height 0.1s ease-in;
     transition: height 0.1s ease-in;
     will-change: height; }
   .custom-scroll .inner-container.content-scrolled:after {
     height: 5px;
+    -webkit-transition: height 0.15s ease-out;
     transition: height 0.15s ease-out; }
 
+.custom-scroll.scroll-handle-dragged .inner-container {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none; }
+
 .custom-scroll .custom-scrollbar {
   position: absolute;
   height: 100%;
   width: 6px;
   right: 3px;
   opacity: 0;
   z-index: 1;
+  -webkit-transition: opacity 0.4s ease-out;
   transition: opacity 0.4s ease-out;
   padding: 6px 0;
   box-sizing: border-box;
@@ -425,6 +433,7 @@ body {
     font-size: 18px; }
 
 .scroll-creator {
+  background: -webkit-linear-gradient(top, #BDEAFC, #FCBDC9);
   background: linear-gradient(to bottom, #BDEAFC, #FCBDC9); }
 
 .panel {

src/main/cs.scss

@@ -33,6 +33,10 @@
     }
   }
 
+  &.scroll-handle-dragged .inner-container {
+    user-select: none;
+  }
+
   .custom-scrollbar {
     position: absolute;
     height: 100%;

src/main/customScroll.css

@@ -3,7 +3,8 @@
   position: relative; }
   .custom-scroll .outer-container:hover .custom-scrollbar {
     opacity: 1;
-    transition-duration: 0.2s; }
+    -webkit-transition-duration: 0.2s;
+            transition-duration: 0.2s; }
 
 .custom-scroll .inner-container {
   overflow-x: hidden;
@@ -15,21 +16,31 @@
     right: 0;
     left: 0;
     height: 0;
+    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.05) 60%, transparent 100%);
     background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.05) 60%, transparent 100%);
     pointer-events: none;
+    -webkit-transition: height 0.1s ease-in;
     transition: height 0.1s ease-in;
     will-change: height; }
   .custom-scroll .inner-container.content-scrolled:after {
     height: 5px;
+    -webkit-transition: height 0.15s ease-out;
     transition: height 0.15s ease-out; }
 
+.custom-scroll.scroll-handle-dragged .inner-container {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none; }
+
 .custom-scroll .custom-scrollbar {
   position: absolute;
   height: 100%;
   width: 6px;
   right: 3px;
   opacity: 0;
   z-index: 1;
+  -webkit-transition: opacity 0.4s ease-out;
   transition: opacity 0.4s ease-out;
   padding: 6px 0;
   box-sizing: border-box;