sliding home page example

by Richard Hunter

HTML

<div class='container'>

    <div class='homepage-section scrollable-section alpha'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia molestie consequat. Integer condimentum rhoncus sem, vitae accumsan dui tincidunt eu. Nam eleifend augue vitae sem dapibus, nec auctor elit venenatis. Integer quis nunc non elit scelerisque lobortis. Morbi urna nunc, porttitor eget odio ut, posuere iaculis turpis. Sed ante ligula, semper nec congue nec, rutrum eget libero. Duis finibus cursus euismod.
    </div><!--
        --><div class='homepage-section non-scrollable-section beta'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia molestie consequat. Integer condimentum rhoncus sem, vitae accumsan dui tincidunt eu. Nam eleifend augue vitae sem dapibus, nec auctor elit venenatis. Integer quis nunc non elit scelerisque lobortis. Morbi urna nunc, porttitor eget odio ut, posuere iaculis turpis. Sed ante ligula, semper nec congue nec, rutrum eget libero. Duis finibus cursus euismod.
    </div><!--
        --><div class='homepage-section scrollable-section gamma '>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia molestie consequat. Integer condimentum rhoncus sem, vitae accumsan dui tincidunt eu. Nam eleifend augue vitae sem dapibus, nec auctor elit venenatis. Integer quis nunc non elit scelerisque lobortis. Morbi urna nunc, porttitor eget odio ut, posuere iaculis turpis. Sed ante ligula, semper nec congue nec, rutrum eget libero. Duis finibus cursus euismod.
    </div>
    
</div>

SCSS

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.container {
    position : absolute;
    width : 50%;
    left : 25%;
    height : 50%;
    border : solid 1px black;

    .homepage-section {
        display : inline-block;
        width : 33.33333%;
        height : 100%;
        padding : 12px;
    }
    .scrollable-section {
        overflow-y : scroll;
        overflow-x : hidden;
    }
    .non-scrollable-section {
        overflow : hidden;
    }
    .alpha { background : yellow; }
    .beta { background : green; }
    .gamma { background : lightblue; }
    
}