LAYOUTSResponsive Web page with sub pages

Date : 3rd November 2021

For all browsers and devices

Information

This layout uses scroll-snap with position:sticky to have a main page and horizontally scrolling sub pages which can be seen using horizontal swiping on touch screens and SHIFT+ mousewheel, OR the horizontal scrollbar, on other devices.

This works in all the latest browsers.

Each sub page snaps into position and covers the current page on screen.

For the sub pages I have used some of my existing pages in iframes so that it is easier to see the format of the HTML for this demonstration.

The CSS is very simple and contains just six element styles which can be seen in the page head.

For this demo there are 4 sub pages, but this can be as many as you like. The sub pages can be any height and will scroll vertically if necessary.

The scroll-snap with position:sticky works in Firefox and iOS Safari using my HTML/CSS 'hack'.

Please consider making a donation, every little helps.