如何滚动父div，其中childs divs溢出？

时间：2017-10-21 09:32:45

标签： jquery html css scroll overflow

所以，我有一些看起来像这样的代码：

.Overview {
  width: 100%;
  white-space: nowrap;
  overflow-x: scroll;
  background-color: lightgray;
}

.OverviewResourceHeader {
  display: inline-block;
  width: 30%;
  float: left;
  margin-right: -4px;
  border-width: 1px;
  border-style: solid none solid solid;
}

.OverviewResourceTypeHead {
  width: 40%;
  border-style: none solid none none;
  border-width: 1px;
  display: inline-block;
  text-align: center;
  height: 53px;
}

.OverviewResourceHead {
  width: 60%;
  display: inline-block;
  text-align: center;
}

.OverviewTimeHeader {
  display: inline-block;
  width: 70%;
  float: right;
  border-width: 2px;
    border-color: red red red red;
    margin-right: -4px;
}
.OverviewDays{
    overflow-x: hidden;
    white-space: nowrap;
    border-style: none solid solid solid;
    border-width: 1px;
    height: 17px;
    overflow-y:hidden;
    
}

.OverviewDay{
    display: inline-block;
    border-width: 1px;
    border-style: none solid none none;
    width: 20px;
    text-align: center;
    overflow: hidden;
    
}

.OverviewWeeks{
    overflow: hidden;
    white-space: nowrap;
    border-style: none solid solid solid;
    border-width: 1px;
    height: 17px;
    overflow-y: hidden;
}

.OverviewWeek{
    display: inline-block;
    border-width: 1px;
    border-style: none solid none none;
    width: 140px;
    text-align: center;
    overflow-x: hidden;
    
}

.OverviewMonths{
    overflow: hidden;
    white-space: nowrap;
    border-style: solid solid solid solid;
    border-width: 1px;
}

.Overview31Month{
    display: inline-block;
    border-right: 1px;
    border-style: none solid none none;
    width: 620px;
    text-align: center;
}

.Overview30Month{
    display: inline-block;
    border-right: 1px;
    border-style: none solid none none;
    width: 600px;
    text-align: center;
}
<div class="Overview">
  <div class="OverviewResourceHeader">
    <div class="OverviewResourceTypeHead">Type</div>
    <div class="OverviewResourceHead">Resource</div>
  </div>
  <div class="OverviewTimeHeader">
    <div class="OverviewMonths">
      <div class="Overview31Month">October 2017</div>
      <div class="Overview30Month">November 2017</div>
      <div class="Overview31Month">December 2017</div>
    </div>
    <div class="OverviewWeeks">
      <div class="OverviewWeek">Week 39</div>
      <div class="OverviewWeek">Week 40</div>
      <div class="OverviewWeek">Week 41</div>
      <div class="OverviewWeek">Week 42</div>
      <div class="OverviewWeek">Week 43</div>
      <div class="OverviewWeek">Week 44</div>
      <div class="OverviewWeek">Week 45</div>
      <div class="OverviewWeek">Week 46</div>
      <div class="OverviewWeek">Week 47</div>
      <div class="OverviewWeek">Week 48</div>
      <div class="OverviewWeek">Week 49</div>
      <div class="OverviewWeek">Week 50</div>
      <div class="OverviewWeek">Week 51</div>
      <div class="OverviewWeek">Week 52</div>
    </div>
    <div class="OverviewDays">
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
    </div>
  </div>

</div>

具有OverviewTimeHeader css类的元素有三个子div，它们都被子元素溢出，溢出：隐藏在它们上面，以便没有三个滚动条。我需要能够滚动overviewTimeHeader，并尝试在css类中移动溢出属性对我没有任何帮助，所以我开始怀疑它是否可能。我也试过使用jquery-mousewheel插件，但似乎不可能滚动隐藏溢出的元素，所以我对如何处理这个问题感到很茫然。我认为CSS会更受欢迎，但我无法管理任何接近它的东西。

（不介意缺少日期和周数的对齐，它适用于我所拥有的更完整的模型，这根本不是问题）

1 个答案:

答案 0 :(得分：1)

这是你想要做的吗？如果是这样，您只需要一个滚动 - 在OverviewTimeHeader课程上：

.OverviewTimeHeader {
    overflow-x: scroll;
    /* rest of your styles here */
}

工作示例： 

.Overview {
  width: 100%;
  white-space: nowrap;
  /* overflow-x: auto;  */
  background-color: lightgray;
}

/* ADD THIS TO CLEAR THE FLOATS */
.Overview:after {
  content: "";
  display: table;
  clear: both;
}
.OverviewResourceHeader {
  display: inline-block;
  width: 30%;
  float: left;
  margin-right: -4px;
  border-width: 1px;
  border-style: solid none solid solid;
}

.OverviewResourceTypeHead {
  width: 40%;
  border-style: none solid none none;
  border-width: 1px;
  display: inline-block;
  text-align: center;
  height: 53px;
}

.OverviewResourceHead {
  width: 60%;
  display: inline-block;
  text-align: center;
}

.OverviewTimeHeader {
  overflow-x: scroll;   /* ADDED THIS */
  display: inline-block;
  width: 70%;
  float: right;
  border: 2px solid red;
  margin-right: -4px;
}
.OverviewDays{
    /* overflow-x: hidden;  */
    white-space: nowrap;
    border-style: none solid solid solid;
    border-width: 1px;
    height: 17px;
    /* overflow-y:hidden; */
    
}

.OverviewDay{
    display: inline-block;
    border-width: 1px;
    border-style: none solid none none;
    width: 20px;
    text-align: center;
    /* overflow: hidden; */
    
}

.OverviewWeeks{
    /* overflow: hidden; */
    white-space: nowrap;
    border-style: none solid solid solid;
    border-width: 1px;
    height: 17px;
    /* overflow-y: hidden; */
}

.OverviewWeek{
    display: inline-block;
    border-width: 1px;
    border-style: none solid none none;
    width: 140px;
    text-align: center;
    /* overflow-x: hidden; */
    
}

.OverviewMonths{
    /* overflow: hidden; */
    white-space: nowrap;
    border-style: solid solid solid solid;
    border-width: 1px;
}

.Overview31Month{
    display: inline-block;
    border-right: 1px;
    border-style: none solid none none;
    width: 620px;
    text-align: center;
}

.Overview30Month{
    display: inline-block;
    border-right: 1px;
    border-style: none solid none none;
    width: 600px;
    text-align: center;
}
<div class="Overview">
  <div class="OverviewResourceHeader">
    <div class="OverviewResourceTypeHead">Type</div>
    <div class="OverviewResourceHead">Resource</div>
  </div>
  <div class="OverviewTimeHeader">
    <div class="OverviewMonths">
      <div class="Overview31Month">October 2017</div>
      <div class="Overview30Month">November 2017</div>
      <div class="Overview31Month">December 2017</div>
    </div>
    <div class="OverviewWeeks">
      <div class="OverviewWeek">Week 39</div>
      <div class="OverviewWeek">Week 40</div>
      <div class="OverviewWeek">Week 41</div>
      <div class="OverviewWeek">Week 42</div>
      <div class="OverviewWeek">Week 43</div>
      <div class="OverviewWeek">Week 44</div>
      <div class="OverviewWeek">Week 45</div>
      <div class="OverviewWeek">Week 46</div>
      <div class="OverviewWeek">Week 47</div>
      <div class="OverviewWeek">Week 48</div>
      <div class="OverviewWeek">Week 49</div>
      <div class="OverviewWeek">Week 50</div>
      <div class="OverviewWeek">Week 51</div>
      <div class="OverviewWeek">Week 52</div>
    </div>
    <div class="OverviewDays">
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">M</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">W</div>
      <div class="OverviewDay">T</div>
      <div class="OverviewDay">F</div>
      <div class="OverviewDay">S</div>
      <div class="OverviewDay">S</div>
    </div>
  </div>

</div>

我已经删除了我删除的overflow，因此您可以看到我更改的内容。

你还需要一个浮动div的“clearfix”（我已添加），你有一些div（例如OverviewResourceHeader）有一个浮点和内联块 - 一旦浮动它，{{1} }将不再适用，因此你不需要两者。

相关问题
最新问题