Question

我正在尝试使div位于另一个仅固定y轴的可滚动div内。我已经尝试了一些方法，但是导航栏也一直在滚动x轴。我希望仅将其固定在y轴上，并且在滚动x轴时，nabar应该随之滚动

这里有我的代码https://jsbin.com/qewopukuwo/2/edit?html,css,output

div.main { 
width:90%; 
height:400px;
overflow: scroll;
white-space: nowrap;
}

div.nav {
  position:fixed;
  background:red;
  padding:10px;
}

div.row {
  margin-bottom:10px;
}

div.content {
 display:inline-block;
  width:50px;
  background:blue;
  color:white;
  padding:20px;
  text-align:center;
}

<div class="main">

<div class="nav">scrollable nav bar</div>  

  <div class="row">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
  </div>

   <div class="row">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
  </div>

 <div class="row">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
  </div>

  <div class="row">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
  </div>

  <div class="row">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
  </div>

  <div class="row">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
  </div>

  <div class="row">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
  </div>

  </div>

Answer 1

对div.main CSS进行以下更改

 height:100%;
 overflow-x: scroll;

这将使Y轴拉伸到内容的全部高度，并且仅滚动x轴。

固定y轴的位置仅在可滚动div内

1 个答案: