I am designing a website its design is something like this.

![Site Design](https://i.stack.imgur.com/t0vjK.png)

In this site i have **disabled horizontal scrolling** instead a User have to scroll using **Arrow Key Left and Right** to view pages.

Now to support this feature i have to check for text/element overflow-y each time a new page is loaded in window and if it is causing the overflow then I had to cut and move the overflow element to next page to support horizontal scrolling.

And to support Responsive design I am not adding these pages statically instead I am creating these pages dynamically so that in case width or height of window changes the next pages which will be displayed will adjust to changed width and height accordingly 
by checking its overflow.

Now the problem I am having is that it is very difficult to apply slide effect animation to this design because to apply slide effect we have to know in advance what will be our next element be to replace that slide but in this case our next element is getting added dynamically and to show the next page i will have to first load that element to window so that it first checks the overflow and creates page and then only page will be displayed.

Is there any other way to check for element causing overflow ?

**Note:** On turning to next page by Arrow Key all **3 pages** which are displaying on window are getting changed.

code I am using to check for overflow:-

```
OverflowY: function(parentObj){

    if(parentObj.offsetHeight < parentObj.scrollHeight){
        //Return true if overflow occurs
        return true;
    }
    else{
        return false;
    }

}

```