<!-- 

  SCROLLING PANELS

  Creating a panel that allows the internal content to scroll separately from the page.

-->

​

<header>

  <h1>Scrolling Panels</h1>

  <p>Scrolling panels requires two items to work:</p>

  <ul>

    <li>The <code>overflow</code> property to allow the content to become 'scrollable'</li>

    <li>A set <code>height</code> or <code>width</code> property to define the space the element should take up.</li>

  </ul>

</header>

​

​

​

<section>

  <h2>Horizontal scrolling</h2>

  <p>Below I have made a panel that allows for horizontal scrolling. Take a look at the CSS for a complete explanation of how it works.</p>

  <div class="horizontal_scroll grid">

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

    </div>

</section>

<section>

  <h2>Vertical scrolling</h2>

  <p>Below I have made a panel that allows for vertical scrolling. Take a look at the CSS for a complete explanation of how it works.</p>

  <div class="vertical_scroll">

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

      <p class="box">This is a box</p>

    </div>

  </section>

/* Just creating some 'boxes' to show how the scrollable area works */

.box {

  height: 5.5rem;

  width: 5.5rem;

  margin: 0;

  padding: 0.25rem;

  background-color: #DDD;

  border: 1px solid white;

}

​

​

/* Just setting the boxes to appear as a grid structure to ensure that they end up next to one another and expand 'beyond' the frame */

.grid {

  display: grid;

  /* The repeat(14, 1fr) is a shorthand for writing in 1fr fourteen times */

  grid-template-columns: repeat(14, 1fr); 

}

​

​

/* Here we set up the box to allow for horizontal scrolling */

.horizontal_scroll {

  border: 0.25rem solid #000;

  /* The max-width below can be set to specify the width the container should appear at */

  max-width: 20rem;

  /* The overflow-x property tells the browser how to deal with content that expands beyond the parent along the x-axis (horizontally). In this case, we tell it to scroll anything that expands beyond it's parent horizontally */

  overflow-x: scroll;

}

​

​

​

​

/* Here we set up the box to allow for vertical scrolling */

.vertical_scroll {

  border: 0.25rem solid #000;

  /* The max-width below can be set to specify the width the container should appear at */

  max-height: 10rem;

  /* The overflow-y property tells the browser how to deal with content that expands beyond the parent along the y-axis (vertically). In this case, we tell it to scroll anything that expands beyond it's parent vertically */

  overflow-y: scroll;

}

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

/* Some styling specifically for these additional explanations */

* {

  box-sizing: border-box;

}

​

body {

  margin: 0 auto;

  padding-bottom: 6rem;

  max-width: 40rem;

  font-family: sans-serif;

}

​

h2 {

  margin-top: 4rem;

}

​

li {

  padding-bottom: 0.5rem;

}

​

figure {

  margin: 6rem 0 0;

}

​

figcaption {

  margin-top: 0.75rem;

  position: relative;

  z-index: 1;

  text-shadow: 0.05rem 0.05rem 0.05rem white;

}

​

​

.further-reading {

  margin-top: 10rem;

  padding-bottom: 2rem;

}

​

​

img {

  height: auto;

  max-width: 100%;

  display: block;

}

​