Question

我正在寻找使用React实现一个水平滚动的网站。

我不知道如何实现我的一些事情，所以我想我会得到一些帮助。

我在包装器中有多个容器Div

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

我希望每个.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>

水平滚动动态

2 个答案: