3

I need to design a website that is split into two "scrollable" halves. There is a left side and a right side. They both need to scroll independently of each other.

How should I approach this? I am not well-versed in JavaScript and would like to use a CSS only approach if possible. Pure JavaScript or jQuery is okay too as last resort.

This only applies to large tablets and desktops, as the layout will resort to two static buttons on mobile devices.

Example Screenshot

EDIT: I have edited the following fiddle but cant seem to "hide" the vertical scroll bars. I want to maintain the design below but still have independent scroll functionality.

fiddle

html, body {
overflow: hidden;
}

div.container {
height: 100vh;
width: 49%;
display: inline-block;
background-color: #ccc;
overflow-y: hidden;
padding: 0;
}

.section {
height: 100vh;
overflow: auto;
}`
Les Taylor
  • 85
  • 1
  • 9
  • Take a look at flexbox: https://chriswrightdesign.com/experiments/using-flexbox-today/. Splitscreen layout is actually quite easy with this – Mathijs Rutgers Jul 17 '15 at 13:12
  • 1
    You could use height: 100vh, with overflow set https://jsfiddle.net/eba3j59g/ - quick example i just set up – user3766844 Jul 17 '15 at 13:18
  • @user3766844 - That is one way to do it! I do want to eliminate the actual default scroll bar if possible. I was thinking it would be nice to have simple arrows that you clicked on that navigated you down that side of the page. Maybe create an attribute on links at the bottom of each section that target (target="deepersection") sections with appropriate id assigned. (#deepersection) – Les Taylor Jul 17 '15 at 14:04
  • @user3766844 I noticed an issue with your fiddle. There is a white strip at the right of the page. The right side needs to extend all the way to the window. Any ideas on how to fix this? – Les Taylor Jul 17 '15 at 20:02

0 Answers0