fix: 🐛 scrolling and height fixes
This commit is contained in:
parent
92dcc94b62
commit
d6aa52fb16
21
src/dom.js
21
src/dom.js
@ -201,6 +201,27 @@ $.scrollbarWidth = function scrollbarWidth() {
|
|||||||
return 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) {
|
$.hasVerticalOverflow = function (element) {
|
||||||
return element.scrollHeight > element.offsetHeight + 10;
|
return element.scrollHeight > element.offsetHeight + 10;
|
||||||
};
|
};
|
||||||
|
|||||||
@ -11,7 +11,7 @@ export default class Style {
|
|||||||
|
|
||||||
linkProperties(this, this.instance, [
|
linkProperties(this, this.instance, [
|
||||||
'options', 'datamanager', 'columnmanager',
|
'options', 'datamanager', 'columnmanager',
|
||||||
'header', 'bodyScrollable', 'datatableWrapper',
|
'header', 'footer', 'bodyScrollable', 'datatableWrapper',
|
||||||
'getColumn', 'bodyRenderer'
|
'getColumn', 'bodyRenderer'
|
||||||
]);
|
]);
|
||||||
|
|
||||||
@ -52,6 +52,9 @@ export default class Style {
|
|||||||
$.style(this.header, {
|
$.style(this.header, {
|
||||||
transform: `translateX(-${scrollLeft}px)`
|
transform: `translateX(-${scrollLeft}px)`
|
||||||
});
|
});
|
||||||
|
$.style(this.footer, {
|
||||||
|
transform: `translateX(-${scrollLeft}px)`
|
||||||
|
});
|
||||||
this._settingHeaderPosition = false;
|
this._settingHeaderPosition = false;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -305,9 +308,10 @@ export default class Style {
|
|||||||
// adapt the container height
|
// adapt the container height
|
||||||
const height = $.getStyle(this.bodyScrollable, 'height');
|
const height = $.getStyle(this.bodyScrollable, 'height');
|
||||||
const scrollHeight = (this.bodyRenderer.hyperlist || {})._scrollHeight || Infinity;
|
const scrollHeight = (this.bodyRenderer.hyperlist || {})._scrollHeight || Infinity;
|
||||||
|
const scrollbarHeight = $.scrollbarHeight();
|
||||||
if (scrollHeight < height) {
|
if (scrollHeight < height) {
|
||||||
$.style(this.bodyScrollable, {
|
$.style(this.bodyScrollable, {
|
||||||
height: (scrollHeight + 1) + 'px'
|
height: (scrollHeight + scrollbarHeight + 2) + 'px'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user