From ecc71e77b90971418c56e2c802077400312d3493 Mon Sep 17 00:00:00 2001 From: runerune-sgt Date: Thu, 6 Jun 2019 15:48:55 +0200 Subject: [PATCH 1/4] update scrollbar on async container content change without requiting mouseenter --- simple-scrollbar.js | 261 +++++++++++++++++++++++--------------------- 1 file changed, 135 insertions(+), 126 deletions(-) diff --git a/simple-scrollbar.js b/simple-scrollbar.js index 71b1337..8fca89f 100644 --- a/simple-scrollbar.js +++ b/simple-scrollbar.js @@ -1,129 +1,138 @@ ;(function(root, factory) { - if (typeof exports === 'object') { - module.exports = factory(window, document) - } else { - root.SimpleScrollbar = factory(window, document) - } + if (typeof exports === 'object') { + module.exports = factory(window, document) + } else { + root.SimpleScrollbar = factory(window, document) + } })(this, function(w, d) { - var raf = w.requestAnimationFrame || w.setImmediate || function(c) { return setTimeout(c, 0); }; - - function initEl(el) { - if (Object.prototype.hasOwnProperty.call(el, 'data-simple-scrollbar')) return; - Object.defineProperty(el, 'data-simple-scrollbar', { value: new SimpleScrollbar(el) }); - } - - // Mouse drag handler - function dragDealer(el, context) { - var lastPageY; - - el.addEventListener('mousedown', function(e) { - lastPageY = e.pageY; - el.classList.add('ss-grabbed'); - d.body.classList.add('ss-grabbed'); - - d.addEventListener('mousemove', drag); - d.addEventListener('mouseup', stop); - - return false; - }); - - function drag(e) { - var delta = e.pageY - lastPageY; - lastPageY = e.pageY; - - raf(function() { - context.el.scrollTop += delta / context.scrollRatio; - }); - } - - function stop() { - el.classList.remove('ss-grabbed'); - d.body.classList.remove('ss-grabbed'); - d.removeEventListener('mousemove', drag); - d.removeEventListener('mouseup', stop); - } - } - - // Constructor - function ss(el) { - this.target = el; - - this.direction = w.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'); - - if (this.direction === 'rtl') { - this.el.classList.add('rtl'); - } - - this.wrapper.appendChild(this.el); - - while (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; - - 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)); - - this.target.classList.add('ss-container'); - - var css = w.getComputedStyle(el); - if (css['height'] === '0px' && css['max-height'] !== '0px') { - el.style.height = css['max-height']; - } - } - - ss.prototype = { - moveBar: function(e) { - var totalHeight = this.el.scrollHeight, - ownHeight = this.el.clientHeight, - _this = this; - - this.scrollRatio = ownHeight / totalHeight; - - var isRtl = _this.direction === 'rtl'; - var right = isRtl ? - (_this.target.clientWidth - _this.bar.clientWidth + 18) : - (_this.target.clientWidth - _this.bar.clientWidth) * -1; - - raf(function() { - // Hide scrollbar if no scrolling is possible - if(_this.scrollRatio >= 1) { - _this.bar.classList.add('ss-hidden') - } else { - _this.bar.classList.remove('ss-hidden') - _this.bar.style.cssText = 'height:' + Math.max(_this.scrollRatio * 100, 10) + '%; top:' + (_this.el.scrollTop / totalHeight ) * 100 + '%;right:' + right + 'px;'; - } - }); - } - } - - function initAll() { - var nodes = d.querySelectorAll('*[ss-container]'); - - for (var i = 0; i < nodes.length; i++) { - initEl(nodes[i]); - } - } - - d.addEventListener('DOMContentLoaded', initAll); - ss.initEl = initEl; - ss.initAll = initAll; - - var SimpleScrollbar = ss; - return SimpleScrollbar; + var raf = w.requestAnimationFrame || w.setImmediate || function(c) { return setTimeout(c, 0); }; + + function initEl(el) { + if (Object.prototype.hasOwnProperty.call(el, 'data-simple-scrollbar')) return; + Object.defineProperty(el, 'data-simple-scrollbar', { value: new SimpleScrollbar(el) }); + } + + // Mouse drag handler + function dragDealer(el, context) { + var lastPageY; + + el.addEventListener('mousedown', function(e) { + lastPageY = e.pageY; + el.classList.add('ss-grabbed'); + d.body.classList.add('ss-grabbed'); + + d.addEventListener('mousemove', drag); + d.addEventListener('mouseup', stop); + + return false; + }); + + function drag(e) { + var delta = e.pageY - lastPageY; + lastPageY = e.pageY; + + raf(function() { + context.el.scrollTop += delta / context.scrollRatio; + }); + } + + function stop() { + el.classList.remove('ss-grabbed'); + d.body.classList.remove('ss-grabbed'); + d.removeEventListener('mousemove', drag); + d.removeEventListener('mouseup', stop); + } + } + + // Constructor + function ss(el) { + this.target = el; + + this.direction = w.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'); + + if (this.direction === 'rtl') { + this.el.classList.add('rtl'); + } + + this.wrapper.appendChild(this.el); + + while (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; + + 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)); + + this.target.classList.add('ss-container'); + + var css = w.getComputedStyle(el); + if (css['height'] === '0px' && css['max-height'] !== '0px') { + el.style.height = css['max-height']; + } + + this.observer = new MutationObserver(function(list) { + if(list.length) this.moveBar(); + }.bind(this)); + + this.observer.observe(this.el, { + childList: true, + subtree: true, + }); + } + + ss.prototype = { + moveBar: function(e) { + var totalHeight = this.el.scrollHeight, + ownHeight = this.el.clientHeight, + _this = this; + + this.scrollRatio = ownHeight / totalHeight; + + var isRtl = _this.direction === 'rtl'; + var right = isRtl ? + (_this.target.clientWidth - _this.bar.clientWidth + 18) : + (_this.target.clientWidth - _this.bar.clientWidth) * -1; + + raf(function() { + // Hide scrollbar if no scrolling is possible + if(_this.scrollRatio >= 1) { + _this.bar.classList.add('ss-hidden') + } else { + _this.bar.classList.remove('ss-hidden') + _this.bar.style.cssText = 'height:' + Math.max(_this.scrollRatio * 100, 10) + '%; top:' + (_this.el.scrollTop / totalHeight ) * 100 + '%;right:' + right + 'px;'; + } + }); + } + } + + function initAll() { + var nodes = d.querySelectorAll('*[ss-container]'); + + for (var i = 0; i < nodes.length; i++) { + initEl(nodes[i]); + } + } + + d.addEventListener('DOMContentLoaded', initAll); + ss.initEl = initEl; + ss.initAll = initAll; + + var SimpleScrollbar = ss; + return SimpleScrollbar; }); From d9f3e4f56e173e9e51943b348e46f964f57bfd95 Mon Sep 17 00:00:00 2001 From: runerune-sgt Date: Thu, 6 Jun 2019 15:50:38 +0200 Subject: [PATCH 2/4] revert code style hook --- simple-scrollbar.js | 270 ++++++++++++++++++++++---------------------- 1 file changed, 135 insertions(+), 135 deletions(-) diff --git a/simple-scrollbar.js b/simple-scrollbar.js index 8fca89f..3ca75b8 100644 --- a/simple-scrollbar.js +++ b/simple-scrollbar.js @@ -1,138 +1,138 @@ ;(function(root, factory) { - if (typeof exports === 'object') { - module.exports = factory(window, document) - } else { - root.SimpleScrollbar = factory(window, document) - } + if (typeof exports === 'object') { + module.exports = factory(window, document) + } else { + root.SimpleScrollbar = factory(window, document) + } })(this, function(w, d) { - var raf = w.requestAnimationFrame || w.setImmediate || function(c) { return setTimeout(c, 0); }; - - function initEl(el) { - if (Object.prototype.hasOwnProperty.call(el, 'data-simple-scrollbar')) return; - Object.defineProperty(el, 'data-simple-scrollbar', { value: new SimpleScrollbar(el) }); - } - - // Mouse drag handler - function dragDealer(el, context) { - var lastPageY; - - el.addEventListener('mousedown', function(e) { - lastPageY = e.pageY; - el.classList.add('ss-grabbed'); - d.body.classList.add('ss-grabbed'); - - d.addEventListener('mousemove', drag); - d.addEventListener('mouseup', stop); - - return false; - }); - - function drag(e) { - var delta = e.pageY - lastPageY; - lastPageY = e.pageY; - - raf(function() { - context.el.scrollTop += delta / context.scrollRatio; - }); - } - - function stop() { - el.classList.remove('ss-grabbed'); - d.body.classList.remove('ss-grabbed'); - d.removeEventListener('mousemove', drag); - d.removeEventListener('mouseup', stop); - } - } - - // Constructor - function ss(el) { - this.target = el; - - this.direction = w.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'); - - if (this.direction === 'rtl') { - this.el.classList.add('rtl'); - } - - this.wrapper.appendChild(this.el); - - while (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; - - 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)); - - this.target.classList.add('ss-container'); - - var css = w.getComputedStyle(el); - if (css['height'] === '0px' && css['max-height'] !== '0px') { - el.style.height = css['max-height']; - } - - this.observer = new MutationObserver(function(list) { - if(list.length) this.moveBar(); - }.bind(this)); - - this.observer.observe(this.el, { - childList: true, - subtree: true, - }); - } - - ss.prototype = { - moveBar: function(e) { - var totalHeight = this.el.scrollHeight, - ownHeight = this.el.clientHeight, - _this = this; - - this.scrollRatio = ownHeight / totalHeight; - - var isRtl = _this.direction === 'rtl'; - var right = isRtl ? - (_this.target.clientWidth - _this.bar.clientWidth + 18) : - (_this.target.clientWidth - _this.bar.clientWidth) * -1; - - raf(function() { - // Hide scrollbar if no scrolling is possible - if(_this.scrollRatio >= 1) { - _this.bar.classList.add('ss-hidden') - } else { - _this.bar.classList.remove('ss-hidden') - _this.bar.style.cssText = 'height:' + Math.max(_this.scrollRatio * 100, 10) + '%; top:' + (_this.el.scrollTop / totalHeight ) * 100 + '%;right:' + right + 'px;'; - } - }); - } - } - - function initAll() { - var nodes = d.querySelectorAll('*[ss-container]'); - - for (var i = 0; i < nodes.length; i++) { - initEl(nodes[i]); - } - } - - d.addEventListener('DOMContentLoaded', initAll); - ss.initEl = initEl; - ss.initAll = initAll; - - var SimpleScrollbar = ss; - return SimpleScrollbar; + var raf = w.requestAnimationFrame || w.setImmediate || function(c) { return setTimeout(c, 0); }; + + function initEl(el) { + if (Object.prototype.hasOwnProperty.call(el, 'data-simple-scrollbar')) return; + Object.defineProperty(el, 'data-simple-scrollbar', { value: new SimpleScrollbar(el) }); + } + + // Mouse drag handler + function dragDealer(el, context) { + var lastPageY; + + el.addEventListener('mousedown', function(e) { + lastPageY = e.pageY; + el.classList.add('ss-grabbed'); + d.body.classList.add('ss-grabbed'); + + d.addEventListener('mousemove', drag); + d.addEventListener('mouseup', stop); + + return false; + }); + + function drag(e) { + var delta = e.pageY - lastPageY; + lastPageY = e.pageY; + + raf(function() { + context.el.scrollTop += delta / context.scrollRatio; + }); + } + + function stop() { + el.classList.remove('ss-grabbed'); + d.body.classList.remove('ss-grabbed'); + d.removeEventListener('mousemove', drag); + d.removeEventListener('mouseup', stop); + } + } + + // Constructor + function ss(el) { + this.target = el; + + this.direction = w.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'); + + if (this.direction === 'rtl') { + this.el.classList.add('rtl'); + } + + this.wrapper.appendChild(this.el); + + while (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; + + 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)); + + this.target.classList.add('ss-container'); + + var css = w.getComputedStyle(el); + if (css['height'] === '0px' && css['max-height'] !== '0px') { + el.style.height = css['max-height']; + } + + this.observer = new MutationObserver(function(list) { + if(list.length) this.moveBar(); + }.bind(this)); + + this.observer.observe(this.el, { + childList: true, + subtree: true, + }); + } + + ss.prototype = { + moveBar: function(e) { + var totalHeight = this.el.scrollHeight, + ownHeight = this.el.clientHeight, + _this = this; + + this.scrollRatio = ownHeight / totalHeight; + + var isRtl = _this.direction === 'rtl'; + var right = isRtl ? + (_this.target.clientWidth - _this.bar.clientWidth + 18) : + (_this.target.clientWidth - _this.bar.clientWidth) * -1; + + raf(function() { + // Hide scrollbar if no scrolling is possible + if(_this.scrollRatio >= 1) { + _this.bar.classList.add('ss-hidden') + } else { + _this.bar.classList.remove('ss-hidden') + _this.bar.style.cssText = 'height:' + Math.max(_this.scrollRatio * 100, 10) + '%; top:' + (_this.el.scrollTop / totalHeight ) * 100 + '%;right:' + right + 'px;'; + } + }); + } + } + + function initAll() { + var nodes = d.querySelectorAll('*[ss-container]'); + + for (var i = 0; i < nodes.length; i++) { + initEl(nodes[i]); + } + } + + d.addEventListener('DOMContentLoaded', initAll); + ss.initEl = initEl; + ss.initAll = initAll; + + var SimpleScrollbar = ss; + return SimpleScrollbar; }); From 2ba6b16f51aeffa0a6112330639e8d279cec49af Mon Sep 17 00:00:00 2001 From: runerune-sgt Date: Thu, 6 Jun 2019 15:53:50 +0200 Subject: [PATCH 3/4] fix .ss-hidden display:none making browser report width of 0 --- simple-scrollbar.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/simple-scrollbar.css b/simple-scrollbar.css index 97c8774..8b4cca4 100644 --- a/simple-scrollbar.css +++ b/simple-scrollbar.css @@ -34,7 +34,8 @@ } .ss-hidden { - display: none; + top: -99999px !important; + left: -99999px !important; } .ss-container:hover .ss-scroll, From 29ce9c612b0a41933bd41da4d88c5e8731168aae Mon Sep 17 00:00:00 2001 From: runerune-sgt Date: Thu, 6 Jun 2019 15:55:34 +0200 Subject: [PATCH 4/4] update minified dist --- simple-scrollbar.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/simple-scrollbar.min.js b/simple-scrollbar.min.js index 736c6d0..1bd75d8 100644 --- a/simple-scrollbar.min.js +++ b/simple-scrollbar.min.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports?module.exports=e(window,document):t.SimpleScrollbar=e(window,document)}(this,function(t,e){function s(t){Object.prototype.hasOwnProperty.call(t,"data-simple-scrollbar")||Object.defineProperty(t,"data-simple-scrollbar",{value:new o(t)})}function i(t,s){function i(t){var e=t.pageY-a;a=t.pageY,n(function(){s.el.scrollTop+=e/s.scrollRatio})}function r(){t.classList.remove("ss-grabbed"),e.body.classList.remove("ss-grabbed"),e.removeEventListener("mousemove",i),e.removeEventListener("mouseup",r)}var a;t.addEventListener("mousedown",function(s){return a=s.pageY,t.classList.add("ss-grabbed"),e.body.classList.add("ss-grabbed"),e.addEventListener("mousemove",i),e.addEventListener("mouseup",r),!1})}function r(t){for(this.target=t,this.direction=window.getComputedStyle(this.target).direction,this.bar='
',this.wrapper=e.createElement("div"),this.wrapper.setAttribute("class","ss-wrapper"),this.el=e.createElement("div"),this.el.setAttribute("class","ss-content"),"rtl"===this.direction&&this.el.classList.add("rtl"),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,i(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 s=window.getComputedStyle(t);"0px"===s.height&&"0px"!==s["max-height"]&&(t.style.height=s["max-height"])}function a(){for(var t=e.querySelectorAll("*[ss-container]"),i=0;i=1?i.bar.classList.add("ss-hidden"):(i.bar.classList.remove("ss-hidden"),i.bar.style.cssText="height:"+Math.max(100*i.scrollRatio,10)+"%; top:"+i.el.scrollTop/e*100+"%;right:"+a+"px;")})}},e.addEventListener("DOMContentLoaded",a),r.initEl=s,r.initAll=a;var o=r;return o}); +!function(t,e){"object"==typeof exports?module.exports=e(window,document):t.SimpleScrollbar=e(window,document)}(this,function(t,e){var s=t.requestAnimationFrame||t.setImmediate||function(t){return setTimeout(t,0)};function i(t){Object.prototype.hasOwnProperty.call(t,"data-simple-scrollbar")||Object.defineProperty(t,"data-simple-scrollbar",{value:new n(t)})}function r(i){for(this.target=i,this.direction=t.getComputedStyle(this.target).direction,this.bar='
',this.wrapper=e.createElement("div"),this.wrapper.setAttribute("class","ss-wrapper"),this.el=e.createElement("div"),this.el.setAttribute("class","ss-content"),"rtl"===this.direction&&this.el.classList.add("rtl"),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,function(t,i){var r;function a(t){var e=t.pageY-r;r=t.pageY,s(function(){i.el.scrollTop+=e/i.scrollRatio})}function n(){t.classList.remove("ss-grabbed"),e.body.classList.remove("ss-grabbed"),e.removeEventListener("mousemove",a),e.removeEventListener("mouseup",n)}t.addEventListener("mousedown",function(s){return r=s.pageY,t.classList.add("ss-grabbed"),e.body.classList.add("ss-grabbed"),e.addEventListener("mousemove",a),e.addEventListener("mouseup",n),!1})}(this.bar,this),this.moveBar(),t.addEventListener("resize",this.moveBar.bind(this)),this.el.addEventListener("scroll",this.moveBar.bind(this)),this.el.addEventListener("mouseenter",this.moveBar.bind(this)),this.target.classList.add("ss-container");var r=t.getComputedStyle(i);"0px"===r.height&&"0px"!==r["max-height"]&&(i.style.height=r["max-height"]),this.observer=new MutationObserver(function(t){t.length&&this.moveBar()}.bind(this)),this.observer.observe(this.el,{childList:!0,subtree:!0})}function a(){for(var t=e.querySelectorAll("*[ss-container]"),s=0;s=1?r.bar.classList.add("ss-hidden"):(r.bar.classList.remove("ss-hidden"),r.bar.style.cssText="height:"+Math.max(100*r.scrollRatio,10)+"%; top:"+r.el.scrollTop/e*100+"%;right:"+a+"px;")})}},e.addEventListener("DOMContentLoaded",a),r.initEl=i,r.initAll=a;var n=r;return n});