Split screen scrolling


Hey everyone - how’s it going? :slight_smile:

I am always trying to find new ways to do things along with new designs and concepts. I came across a pretty cool landing page the other day and I have tried to recreate it.

Link to my site

In this particular case I am trying to create a 1 sided scroll website - where the form stays in view on the right hand side and the left hand side of the page consists of information which you can scroll… - this part works fine.

Unfortunately, I am getting some errors:

  • my form isn’t showing up. It’s meant to be on the right hand side of the page, but literally isn’t there.
  • The scroll bar no longer appears (after tweaking code to make it work) but you can still scroll half of the page
  • Unbounce is meant to have default white background, but it’s all grey, as if there is no section (but there is)

Anyway, you can have a look at the website here

Any help would be greatly appreciated, I can post the code here if someone would like.



Hi @erayner,

A few months back I played around with the same idea but never got to implementing it on a live page.

Here is an example of what I put together and I think it closely matches what you are trying to achieve.

It’s just a rough concept. The black lines represent either the beginning or end of sections.

All it took is just a few lines of CSS:

  #lp-pom-box-13 {

This should get you going in the right direction.



I had a different approach

.scroll-container{ height: 100%; background-color: white; } .content{ padding: 50px 20px; height: 100%; overflow-y:scroll; width: 90%; } #lp-code-9{ height: 100vh; } #lp-pom-block-15{ width: 100%; }

I put a scroll box in an html code block using overflow-y: scroll.
But I will give yours a go now :slight_smile: Thanks!


This is a very unique layout! It would be interesting if you could hide it on mobile, as I’m assuming it wouldn’t provide the best usability experience on a mobile screen. But on desktop I could see this coming in handy!