0

我正在创建一个带有水平可滚动 div 的网站 - 类似于 Netflix 电影导航系统，但带有可滚动的轮播而不是点击式轮播。我已将可滚动内容分类到不同的 div 中——将 4 个可见的“项目”分配给选择框——但我无法让 div 捕捉到其容器的开头。

这是我的代码 - 基本的颜色/边框只是为了让我可以告诉我在设计元素时如何影响它，所以可以随意忽略或更改它。

/* style reset */

* {
  margin: 0;
  padding: 0;
}

/* main styling */

.main-container {
  font-family: sans-serif;
  background: blue;
  margin: 1em 0 1em 0;
  height: 20em;
  width: 70em;
}

.main-container .container-title{
  padding: 1em;
}

.main-container .scroll {
  width: 68em;
  margin: 0 1em 0 1em;
  overflow-x: hidden;
  overflow-x: scroll;
  scroll-snap-type: x-mandatory;
  scroll-behavior: smooth;
}

.main-container .scroll .carosell-container {
  border: solid #9fcdff;
  height: 14.3em;
  width: 136em;
  
}

.main-container .scroll .carosell-container #firstStack-genre , #secondStack-genre {
  height: 10.3em;
  width: 68em;
  display: inline-block;
  flex: none;
  float: left;
  padding: 2em 0 2em 0;
  scroll-snap-type: x-proximity;
  scroll-snap-align: start;
}

.main-container .scroll .carosell-container #firstStack-genre {
  background: yellow;
}

.main-container .scroll .carosell-container .cassete-content {
  background: #9FdDFF;
  display: inline-block;
  height: 10em;
  width: 14em;
  border-radius: 1.75em;
  margin: 0 1em 0 1.5255em;
}

.main-container .scroll .carosell-container .cassete-content .content-title {
  text-align: center;
  padding: 4em 0 1em 0;
  
}
<div class="main-container">
  <div class="container-title">
      <h3 class="title">
        Genre
      </h3>
    </div>
  <div class="scroll">
    <div class="carosell-container">
     <div id="firstStack-genre">
      <div class="cassete-content">
        <div class="content-title">
         <h5>
           CASSETTE
         </h5>
        </div>
      </div>
      <div class="cassete-content">
        <div class="content-title">
         <h5>
           CASSETTE
         </h5>
        </div>
      </div>
      <div class="cassete-content">
        <div class="content-title">
         <h5>
           CASSETTE
         </h5>
        </div>
      </div>
      <div class="cassete-content">
        <div class="content-title">
         <h5>
           CASSETTE
         </h5>
        </div>
      </div>
    </div>
     <div id="secondStack-genre">
      <div class="cassete-content">
        <div class="content-title">
         <h5>
           CASSETTE
         </h5>
        </div>
      </div>
      <div class="cassete-content">
        <div class="content-title">
         <h5>
           CASSETTE
         </h5>
        </div>
      </div>
      <div class="cassete-content">
        <div class="content-title">
         <h5>
           CASSETTE
         </h5>
        </div>
      </div>
      <div class="cassete-content">
        <div class="content-title">
         <h5>
           CASSETTE
         </h5>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

完整代码：https ://jsfiddle.net/qwaliY/cpwm0oL2/226/

4

0 回答 0