動的に水平スクロール

Question

Reactを使用して、横にスクロールするサイトを実装しようとしています。

私はいくつかのことを実装する方法がわからないので、私はいくつかの助けを得るだろうと思った。

私はラッパー

<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> 

内に複数のコンテナのdivを持っている私は、各.SECTIONが画面（ない親）の幅の100％を取るにしたいと私は彼らが水平方向にスクロールします。

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

だから私の問題があり、私はこれがダイナミックになりたい（あなたは私の例では、私は12000pxを使用しています見ることができます）ラッパーに特定の幅を入れてする必要がありますする必要はありません。

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

したがって、.wrapperを動的にするための最良の方法は、その内部の内容に応じて幅を変更することです。 .sectionsクラスは画面幅の100％を占めます（親の100％ではありません）。

また、誰かがマウスホイールの動作を引き継ぐ方法を見つけるために正しい方向で私を指すことができる場合、ボーナスポイント...？

ありがとうございました。

Answer 1

試してみてください。

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> 

デモ：http://jsfiddle.net/lotusgodkk/akqp2LoL/1/

Answer 2

.main{ 
 

 
} 
 
.wrapper{ 
 
    height:300px; 
 
width:400px; 
 
overflow-x:auto; 
 
overflow-y:hidden; 
 
} 
 
.section{ 
 
    width: 4000px; 
 
    height: 100%; 
 
}

<div class="main"> 
 
<div class="wrapper"> 
 
    <div class="section" id="section1"> 
 
    <h2>Section Header</h2> 
 
    <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </p> 
 
    </div> 
 
</div> 
 
</div>