Question

我有一个包含一些内容的页面，以及一个用于编辑此内容的工具栏。工具栏固定在页面右侧。工具栏的内部也应该是可滚动的。

如何使该工具栏的内部可滚动？现在，当我将鼠标悬停在工具栏上并滚动时，会导致滚动背景，而不是工具栏内容。

我尝试过

 overflow-y: scroll;

和

 overflow-y: auto;

这些没有帮助。

更新：

工具栏内只有其中一列需要滚动。

示例：

https://jsfiddle.net/kyqr5xst/12/

Answer 1

尝试一下：

.fixed_div
{
  overflow: auto;  
}

Answer 2

将overflow:auto;添加到.fixed_div

.fixed_div {
  position: fixed;
  top: 0;
  width: 400px;
  bottom: 0;
  
  overflow:auto;
  right: 0;
  border: 1px solid grey;
  background: #ffffff;
  padding: 10px;
  
}

.column {
  color: grey;
  overflow-y: auto;
}

<h1>
Background text
</h1>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>

<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>

<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>

<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>

<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>

<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<div class="fixed_div">
  <div class="column">
  <h2>Toolbar Content (needs scrolling on hover)
</h2>
  <p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specified.
Pretty cool, isn't it?
</p>
<p>
This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags you want and our generator will generate just as you specifi.
Pretty cool, isn't it?
</p>

  </div>
</div>

提琴：https://jsfiddle.net/ot9d7kju/5/

Answer 3

在您的固定导航中添加height:auto overflow:auto。

css：使固定位置div中的内容可滚动

3 个答案: