The website I'm working on has a unique design that requires users to scroll horizontally using the Arrow Keys instead of swiping. To achieve this, I must constantly check for overflow in text or elements each time a new page is loaded, and if necessary, rearrange content to support horizontal scrolling.
Furthermore, I am dynamically generating pages to ensure responsiveness; should the window dimensions change, the layout will adjust accordingly by checking for overflow.
However, implementing slide effect animations proves challenging due to the dynamic loading of elements. Since the next element is only added when needed, it's difficult to predict what will come next for the slide effect transition.
Is there an alternative method to detect elements causing overflow without preloading?
Note: Navigating to the next page using the Arrow Keys changes all 3 displayed pages on the screen.
Here is a snippet of the code I'm using to check for overflow:
OverflowY: function(parentObj){
if(parentObj.offsetHeight < parentObj.scrollHeight){
//Return true if overflow occurs
return true;
}
else{
return false;
}
}