@ton I was asking myself the same question, adding a few modifiers in the CSS seemed to be the trick for me. id-6 being my home page. In my case i just wanted my home-page as well as project pages (therefore type-project) to be split. Maybe the code i used can be some sort of starting point for you.
#grid .home, .type-project #grid, .id-6 #footer-region , .type-project #footer-region {
width: 50%;
height: 100%;
position: fixed;
top: 0;
overflow-y: scroll;
overflow: -moz-scrollbars-none;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
#footer-region {
left: 0;
}
#grid .home, .type-project #grid {
right: 0;
}
::-webkit-scrollbar {
display: none;
}
.type-project #footer-region,
.id-6 #footer-region {
border-right: 1px solid black;
}
You can find the page id of your website via the web inspector of your browser and then checking the classes inside the <body> tag (there will be a few, just look for the id- one).
All the best,
Jacob