jquery - 水平滚动问题

Question

我正在创建这个网页，其中有几个垂直滚动的部分。每个部分的高度都是 100%，因此视口(viewport)中每次有一个部分。现在我想实现相反的效果，因为每个部分应该有两个部分应该水平滚动(每个部分的宽度为 100%)。

例。在 jsFiffle 中，第一部分有两个带有标题的 div:

We are based in location

和

We2 are based in location

<!-- section I -->
    <div class="section row">
      <div class="section-content">
        <h2>We are company</h2>
        <p>We are a digital marketing agency based on Hong Kong, founded in 2010.</p>
        <p>We help brands be digital by providing a range of related services including: design & branding, web development, digital communications, social media, and online advertising.  We live all around the world and call ourselves account analysts and managers, designers, developers, project managers and friends and teammates.  We have helped clients big and small, with both shot-term and yearly retainer project work.  We are always interested to grow our knowledge and experience.</p>
        <p>Thank you for visiting our website.</p>
      </div>

      <div class="second-content">
        <h2>We2 are company</h2>
        <p>We are a digital marketing agency based on Hong Kong, founded in 2010.</p>
        <p>We help brands be digital by providing a range of related services including: design & branding, web development, digital communications, social media, and online advertising.  We live all around the world and call ourselves account analysts and managers, designers, developers, project managers and friends and teammates.  We have helped clients big and small, with both shot-term and yearly retainer project work.  We are always interested to grow our knowledge and experience.</p>
        <p>Thank you for visiting our website.</p>
      </div>
    </div>
    <!-- end section I -->

这是我的 jsFiffle (不太好，因为我用的是粉底)

Answer 1

如果我没理解错的话，你想要类似下面的东西:

http://jsfiddle.net/8Dz9n/

HTML

<div class="section">
    <div class=" row">
        <div class="section-content">
            <h2>We are company</h2>
            <p>We are a digital marketing agency based on Hong Kong, founded in 2010.</p>
            <p>We help brands be digital by providing a range of related services including: design & branding, web development, digital communications, social media, and online advertising.  We live all around the world and call ourselves account analysts and managers, designers, developers, project managers and friends and teammates.  We have helped clients big and small, with both shot-term and yearly retainer project work.  We are always interested to grow our knowledge and experience.</p>
            <p>Thank you for visiting our website.</p>
        </div>

        <div class="second-content">
            <h2>We2 are company</h2>
            <p>We are a digital marketing agency based on Hong Kong, founded in 2010.</p>
            <p>We help brands be digital by providing a range of related services including: design & branding, web development, digital communications, social media, and online advertising.  We live all around the world and call ourselves account analysts and managers, designers, developers, project managers and friends and teammates.  We have helped clients big and small, with both shot-term and yearly retainer project work.  We are always interested to grow our knowledge and experience.</p>
            <p>Thank you for visiting our website.</p>
        </div>
    </div>
</div>

CSS

.section {height:100%; width:100%;}
.row {width:200%; height:100%;}
.section-content, .second-content  {float:left; height:100%; width:50%; background:red;}