I am experiencing an issue with the scrolling behavior of a wrapper div that contains two nested divs. Specifically, when I scroll the wrapper horizontally on Android devices, the header section and content section seem to be out of sync and there is a noticeable delay before they catch up.
The wrapper has the default CSS rule overflow-x: auto; applied to it, and both nested elements are absolutely positioned with their left and right properties set to 0, along with other styling attributes such as heights.
I would greatly appreciate any assistance or guidance in resolving this problem. Thank you.
Below is the snippet of code that I am currently working with:
var divEditWrapper = document.createElement("div");
divEditWrapper.id = "divEditWrapper";
divEditWrapper.style.cssText = "bottom: 0px; left: 0px; overflow: hidden; overflow-x: auto; position: absolute; right: 0px; top: 64px;";
divEdit.appendChild(divEditWrapper);
divDataHeaders = document.createElement("div");
divDataHeaders.style.cssText = "color: rgba(0,0,0,0.54); height: 54px; left: 0px; position: absolute; right: 0px; top: 0px; ";
divEditWrapper.appendChild(divDataHeaders);
divEditContent = document.createElement("div");
divEditContent.id = "divDataGridEditContent";
divEditContent.style.cssText = "bottom: 0px; overflow: hidden; overflow-y:auto; left: 0px; position: absolute; right: 0px; top: 54px;";
divEditWrapper.appendChild(divEditContent);