From da293017b8b1bb8e1b7eed066c8473f61dda2e1a Mon Sep 17 00:00:00 2001 From: Julian Lloyd Date: Tue, 14 Nov 2017 15:47:36 +0100 Subject: [PATCH 1/5] Add active state to scrollbar If you click and hold the scrollbar to drag, scrolling continues to work even if your mouse leaves the `.ss-container` ...which is correct behavior, but the scrollbar fades out; this change enables the scrollbar to remain visible. --- simple-scrollbar.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/simple-scrollbar.css b/simple-scrollbar.css index 9b323ac..ade3a8a 100644 --- a/simple-scrollbar.css +++ b/simple-scrollbar.css @@ -37,7 +37,9 @@ display: none; } -.ss-container:hover .ss-scroll { + +.ss-container:hover .ss-scroll, +.ss-container:active .ss-scroll { opacity: 1; } From 9220ee04a1aff2bd2f1de902e67ef7dec8967bdf Mon Sep 17 00:00:00 2001 From: Julian Lloyd Date: Tue, 14 Nov 2017 15:57:45 +0100 Subject: [PATCH 2/5] Remove extra new line --- simple-scrollbar.css | 1 - 1 file changed, 1 deletion(-) diff --git a/simple-scrollbar.css b/simple-scrollbar.css index ade3a8a..97c8774 100644 --- a/simple-scrollbar.css +++ b/simple-scrollbar.css @@ -37,7 +37,6 @@ display: none; } - .ss-container:hover .ss-scroll, .ss-container:active .ss-scroll { opacity: 1; From b203e09f06ff6905975b94685f3bfc02a7f9ac12 Mon Sep 17 00:00:00 2001 From: Julian Lloyd Date: Tue, 14 Nov 2017 17:06:21 +0100 Subject: [PATCH 3/5] Update scrollbar position on window resize --- simple-scrollbar.js | 1 + 1 file changed, 1 insertion(+) diff --git a/simple-scrollbar.js b/simple-scrollbar.js index 2268eb6..baa3a39 100644 --- a/simple-scrollbar.js +++ b/simple-scrollbar.js @@ -69,6 +69,7 @@ dragDealer(this.bar, this); this.moveBar(); + w.addEventListener('resize', this.moveBar.bind(this)); this.el.addEventListener('scroll', this.moveBar.bind(this)); this.el.addEventListener('mouseenter', this.moveBar.bind(this)); From f8f0701883bc772c6983bf72767aa6271ee75f20 Mon Sep 17 00:00:00 2001 From: Julian Lloyd Date: Thu, 16 Nov 2017 04:29:52 +0100 Subject: [PATCH 4/5] use window argument instead of global --- simple-scrollbar.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/simple-scrollbar.js b/simple-scrollbar.js index baa3a39..5cd9b4a 100644 --- a/simple-scrollbar.js +++ b/simple-scrollbar.js @@ -42,7 +42,7 @@ function ss(el) { this.target = el; - this.direction = window.getComputedStyle(this.target).direction; + this.direction = w.getComputedStyle(this.target).direction; this.bar = '
'; @@ -75,7 +75,7 @@ this.target.classList.add('ss-container'); - var css = window.getComputedStyle(el); + var css = w.getComputedStyle(el); if (css['height'] === '0px' && css['max-height'] !== '0px') { el.style.height = css['max-height']; } From 794a0b37eb32bc354dea4b718700e95d1fab351f Mon Sep 17 00:00:00 2001 From: Vitor Buzinaro Date: Sun, 25 Feb 2018 13:13:20 -0300 Subject: [PATCH 5/5] fix(simple-scrollbar): correct defineProperty v0.3.1 release --- package.json | 2 +- simple-scrollbar.js | 2 +- simple-scrollbar.min.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index e0b3fcd..205e47a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "simple-scrollbar", - "version": "0.3.0", + "version": "0.3.1", "description": "Very simple vanilla javascript library for creating a custom scrollbar cross-browser and cross-devices.", "main": "simple-scrollbar.js", "repository": { diff --git a/simple-scrollbar.js b/simple-scrollbar.js index 4d52bb1..78649fa 100644 --- a/simple-scrollbar.js +++ b/simple-scrollbar.js @@ -3,7 +3,7 @@ function initEl(el) { if (Object.prototype.hasOwnProperty.call(el, 'data-simple-scrollbar')) return; - Object.defineProperty(el, 'data-simple-scrollbar', new SimpleScrollbar(el)); + Object.defineProperty(el, 'data-simple-scrollbar', { value: new SimpleScrollbar(el) }); } // Mouse drag handler diff --git a/simple-scrollbar.min.js b/simple-scrollbar.min.js index f0c795c..06c43c6 100644 --- a/simple-scrollbar.min.js +++ b/simple-scrollbar.min.js @@ -1,4 +1,4 @@ -(function(e,d){function g(a){a.hasOwnProperty("data-simple-scrollbar")||Object.defineProperty(a,"data-simple-scrollbar",new SimpleScrollbar(a))}function l(a,b){function c(a){var c=a.pageY-e;e=a.pageY;h(function(){b.el.scrollTop+=c/b.scrollRatio})}function f(){a.classList.remove("ss-grabbed");d.body.classList.remove("ss-grabbed");d.removeEventListener("mousemove",c);d.removeEventListener("mouseup",f)}var e;a.addEventListener("mousedown",function(b){e=b.pageY;a.classList.add("ss-grabbed");d.body.classList.add("ss-grabbed"); +(function(e,d){function g(a){a.hasOwnProperty("data-simple-scrollbar")||Object.defineProperty(a,"data-simple-scrollbar",{value:new SimpleScrollbar(a)})}function l(a,b){function c(a){var c=a.pageY-e;e=a.pageY;h(function(){b.el.scrollTop+=c/b.scrollRatio})}function f(){a.classList.remove("ss-grabbed");d.body.classList.remove("ss-grabbed");d.removeEventListener("mousemove",c);d.removeEventListener("mouseup",f)}var e;a.addEventListener("mousedown",function(b){e=b.pageY;a.classList.add("ss-grabbed");d.body.classList.add("ss-grabbed"); d.addEventListener("mousemove",c);d.addEventListener("mouseup",f);return!1})}function f(a){this.target=a;this.direction=window.getComputedStyle(this.target).direction;this.bar='
';this.wrapper=d.createElement("div");this.wrapper.setAttribute("class","ss-wrapper");this.el=d.createElement("div");this.el.setAttribute("class","ss-content");"rtl"===this.direction&&this.el.classList.add("rtl");for(this.wrapper.appendChild(this.el);this.target.firstChild;)this.el.appendChild(this.target.firstChild); this.target.appendChild(this.wrapper);this.target.insertAdjacentHTML("beforeend",this.bar);this.bar=this.target.lastChild;l(this.bar,this);this.moveBar();this.el.addEventListener("scroll",this.moveBar.bind(this));this.el.addEventListener("mouseenter",this.moveBar.bind(this));this.target.classList.add("ss-container");var b=window.getComputedStyle(a);"0px"===b.height&&"0px"!==b["max-height"]&&(a.style.height=b["max-height"])}function k(){for(var a=d.querySelectorAll("*[ss-container]"),b=0;b