diff --git a/src/dom.js b/src/dom.js index a8731be..ac1c62d 100644 --- a/src/dom.js +++ b/src/dom.js @@ -201,6 +201,27 @@ $.scrollbarWidth = function scrollbarWidth() { return scrollbarWidth; }; +$.scrollbarHeight = function scrollbarHeight() { + // Create the measurement node + const scrollDiv = document.createElement('div'); + $.style(scrollDiv, { + width: '100px', + height: '100px', + overflow: 'scroll', + position: 'absolute', + top: '-9999px' + }); + document.body.appendChild(scrollDiv); + + // Get the scrollbar height + const scrollbarHeight = scrollDiv.offsetHeight - scrollDiv.clientHeight; + + // Delete the DIV + document.body.removeChild(scrollDiv); + + return scrollbarHeight; +}; + $.hasVerticalOverflow = function (element) { return element.scrollHeight > element.offsetHeight + 10; }; diff --git a/src/style.js b/src/style.js index 51a249b..caa2830 100644 --- a/src/style.js +++ b/src/style.js @@ -11,7 +11,7 @@ export default class Style { linkProperties(this, this.instance, [ 'options', 'datamanager', 'columnmanager', - 'header', 'bodyScrollable', 'datatableWrapper', + 'header', 'footer', 'bodyScrollable', 'datatableWrapper', 'getColumn', 'bodyRenderer' ]); @@ -52,6 +52,9 @@ export default class Style { $.style(this.header, { transform: `translateX(-${scrollLeft}px)` }); + $.style(this.footer, { + transform: `translateX(-${scrollLeft}px)` + }); this._settingHeaderPosition = false; }); }); @@ -305,9 +308,10 @@ export default class Style { // adapt the container height const height = $.getStyle(this.bodyScrollable, 'height'); const scrollHeight = (this.bodyRenderer.hyperlist || {})._scrollHeight || Infinity; + const scrollbarHeight = $.scrollbarHeight(); if (scrollHeight < height) { $.style(this.bodyScrollable, { - height: (scrollHeight + 1) + 'px' + height: (scrollHeight + scrollbarHeight + 2) + 'px' }); }