Horizontal Scrolling dynamically

Question

I'm looking to implement a site, with React, that scrolls horizontally.

I'm not sure how to implement i few things so i thought i'd get some help.

I have multiple container Divs inside a wrapper

<div class="wrapper">
  <div class="section" id="section1"> <!-- Needs to be 100% of screen -->
    <h2>Section Header</h2>
    <p>
      Some Text
    </p>
  </div>
  <div class="section" id="section2"> <!-- Needs to be 100% of screen -->
    <h2>Section Header</h2>
    <p>
      Some Text
    </p>
  </div>
</div>

I want each .section to take up 100% of the width of the screen (not the parent) and i want them to scroll horizontally.

.wrapper{
  background:#000;
  width:12000px; /* Needs to change depending on content */
  position:absolute;
  top:0px;
  left:0px;
  bottom:0px;
}

So my problem is, i don't want to have to put a specific width to the wrapper (You can see in my example i am using 12000px) I'd like this to be dynamic.

.section{
  width: 4000px; /* Needs to be 100% of the client screen size */
  float: left;
  height: 100%;
}

So what is the best way for me to make the .wrapper dynamic, so it changes width depending on what is inside of it? and the .sections classes take up 100% of the screen width (Not 100% of it's parent)?

Also, bonus points if anyone can point me in the right direction to find out how to take over the mousewheel behavior...?

Thanks.

Answer 1

Try:

JS:

      $(document).ready(function() {
            $('.scrolls').mousewheel(function(e, delta) {
                this.scrollLeft -= (delta * 40);
                e.preventDefault();
            });
        });

CSS:

.wrapper {
  background: #EFEFEF;
  box-shadow: 1px 1px 10px #999;
  margin: auto;
  text-align: left;
  position: relative;
  border-radius: 5px;
  margin-bottom: 20px !important;
  width: 100%;
  padding-top: 5px;
}

.scrolls {
  overflow-x: scroll;
  overflow-y: hidden;
  height: 80px;
  white-space: nowrap
}

.scrolls img {
  display: inline-block;
  vertical-align: top;
  width: 100%;
}

HTML:

<div class="wrapper">
        <div class="scrolls">
            <img src="http://placehold.it/50x50" />
            <img src="http://placehold.it/50x50" />
            <img src="http://placehold.it/50x50" />
            <img src="http://placehold.it/50x50" />
            <img src="http://placehold.it/50x50" />
            <img src="http://placehold.it/50x50" />
            <img src="http://placehold.it/50x50" />
            <img src="http://placehold.it/50x50" />
            <img src="http://placehold.it/50x50" />
            <img src="http://placehold.it/50x50" />
            <img src="http://placehold.it/50x50" />
            <img src="http://placehold.it/50x50" />
            <img src="http://placehold.it/50x50" />
            <img src="http://placehold.it/50x50" />
            <img src="http://placehold.it/50x50" />
            <img src="http://placehold.it/50x50" />
            <img src="http://placehold.it/50x50" />
            <img src="http://placehold.it/50x50" />
            <img src="http://placehold.it/50x50" />
            <img src="http://placehold.it/50x50" />
        </div>
    </div>

Demo: http://jsfiddle.net/lotusgodkk/akqp2LoL/1/