Horizontally scrollng div

Question

I am on a tight, self-imposed deadline to complete my first site by the end of the year. Right now, I am working on a horizontally scrolling div that includes "story blocks" and that can be scrolled with the mouse wheel or touch. Essentially, I would prefer something like this. In this picture, the "story-blocks" scroll horizontally inside a div which assumes the remaining height of the page. Here is a very rough example of what I have been playing with in Codepen.

HTML:

<div id="scroll-container">
    <div class="story"> Story story story </div>
    <div class="story"> Story story story </div>
    <div class="story"> Story story story </div>
    <div class="story"> Story story story </div>
    <div class="story"> Story story story </div>
    <div class="story"> Story story story </div>
</div>

CSS:

#scroll-container {
   width: 100%;
   height: /* Remaining Height on Page */;
   overflow-x: scroll;
   overflow-y: hidden; }

#scroll-container div {
  display: inline-block; }

.story {
  line-height: 100px;
  background-color: #ececec;
  width: 300px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  float: left;
  margin: 10px 10px 10px 0px; }

Here is the corresponding Codepen. What I am looking for, ideally, is to create this div that can scroll horizontally ala Windows 8, in which the user's up and down scrollwheel will scroll the div left and right. Of course, this may not be possible, but if it is I'd love to see it.

I have struggled with this element and have tried to do it on my own for a while now, but with New Year's Eve fast approaching, I am finally asking for a little help from the Stack Overflow community. Thank you in advance and happy almost New Year!

Answer 1

Add the following to your CSS:

html, body{
    white-space: nowrap;
}

Even more, you can style it. Here is how to do it for webkit browsers like Chrome and Safari:

::-webkit-scrollbar
{
  height: 12px;
}

::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb
{
  background: rgba(0, 0, 0, 0.5);
}

It looks much better, right? http://codepen.io/anon/pen/FlzJH