From 18417cc6530489b859558c896ca848ecfc4591f3 Mon Sep 17 00:00:00 2001 From: Heng Date: Fri, 24 Jul 2020 15:00:59 -0700 Subject: [PATCH] avoid force layout/reflow in moveBar move calculation of scrollRatio inside of requestAnimationFrame to avoid triggering layout/reflows on scroll. --- simple-scrollbar.js | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/simple-scrollbar.js b/simple-scrollbar.js index 8db0307..25002d9 100644 --- a/simple-scrollbar.js +++ b/simple-scrollbar.js @@ -34,10 +34,10 @@ }); function drag(e) { - var delta = e.pageY - lastPageY; - lastPageY = e.pageY; - raf(function() { + var delta = e.pageY - lastPageY; + lastPageY = e.pageY; + context.el.scrollTop += delta / context.scrollRatio; }); } @@ -100,7 +100,7 @@ w.removeEventListener('resize', this.mB); this.el.removeEventListener('scroll', this.mB); this.el.removeEventListener('mouseenter', this.mB); - + this.target.classList.remove('ss-container'); //Unwrap the initial content and remove remaining wrappers @@ -115,18 +115,19 @@ ss.prototype = { moveBar: function(e) { - var totalHeight = this.el.scrollHeight, - ownHeight = this.el.clientHeight, - _this = this; + var _this = this; - this.scrollRatio = ownHeight / totalHeight; + raf(function() { + var totalHeight = _this.el.scrollHeight, + ownHeight = _this.el.clientHeight, - var isRtl = _this.direction === 'rtl'; - var right = isRtl ? - (_this.target.clientWidth - _this.bar.clientWidth + 18) : - (_this.target.clientWidth - _this.bar.clientWidth) * -1; + _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')