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, diff --git a/simple-scrollbar.js b/simple-scrollbar.js index 71b1337..3ca75b8 100644 --- a/simple-scrollbar.js +++ b/simple-scrollbar.js @@ -82,9 +82,18 @@ 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']; + 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 = { 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});