绝对定位元素激活滚动答案

【问题标题】：absolute positioned element activating scroll绝对定位元素激活滚动
【发布时间】：2016-08-04 22:41:21
【问题描述】：

我的标题中有一个下拉菜单（在此示例中始终打开）。当菜单打开时，它会在打开时激活标题滚动。如何在不激活垂直标题滚动条的情况下使菜单可见？请注意，我需要在标题上设置overflow-x: hidden，因为如果人们在标题中添加很多元素，标题水平滚动不应该激活。溢出的元素应该水平隐藏。

body{
  padding: 0;
  margin: 0;
}

.container{
  display: flex;
  flex-direction: column;
}

.header{
  padding: 12px;
  flex: 0 0 75px;
  background: yellow;
  overflow-x: hidden;
}

.content{
  flex: 1 1 auto;
  padding: 12px;
}

.dropdown{
  position: relative;
}

.menu{
  padding: 12px;
  position: absolute;
  background: white;
  top: 100%;
  left: 0;
}

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

<div class="container">
  <div class="header">
    <div class="dropdown">
      <button>Dropdown</button>
      <div class="menu">
        <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
          <li>four</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi distinctio sit asperiores tenetur dolorum ratione cupiditate, ea, quia numquam, inventore aspernatur repudiandae, sapiente recusandae dolorem. Quidem rem molestias, fugit molestiae.
  </div>
</div>

例如： stackoverflow 下拉菜单：当标题没有滚动条的情况下打开时，下拉菜单会出现在标题上方。我希望发生这样的事情：

【问题讨论】：

你到底想做什么？为什么会有一个没有任何功能的按钮？ “激活卷轴”是什么意思？
请指定您的确切目标。你是想去掉滚动条还是动态调整标题高度？
我试图在标题中显示一个下拉菜单。这是一种粗略的展示方式，但足以展示我面临的问题。按钮唯一能做的就是隐藏和显示菜单。如果显示菜单，则激活标题滚动。如何避免激活标题滚动但仍显示菜单？
看来您的示例并不完整，据我了解，当您切换菜单时会发生一些事情，并且切换脚本不是您示例的一部分......或者是我还是误会你了？
如果禁用滚动，下拉菜单的高度会很大。所以你只需要提高 .header-element 的高度。

标签： html css flexbox

【解决方案1】：

您的问题是通过设置overflow-x，您正在为整个元素设置溢出属性。即使您没有专门设置溢出-y，这也会导致您的容器启用滚动条，即使您的菜单是绝对定位的。

您必须删除 overflow-x 属性才能解决此问题。

原因我将引用@JamesKhoury 对this question 的回答：

如果您对overflow-x 或overflow-y 使用visible，而对另一个使用不可见的东西。可见值被解释为 auto。

您还可以查看this analysis，了解哪些组合会以这种方式导致问题。

编辑
由于对这篇文章的反对很可能是因为问题指定需要溢出-x，所以让我再次声明，无法从具有溢出属性的元素中获取绝对定位的元素以上述方式显示。从这一点上，您可以决定是废弃溢出属性还是整个菜单，前者显然更容易解决。

【讨论】：

我没有投反对票:-)。你的回答解决了我的问题。我将无法使用溢出隐藏

【解决方案2】：

这样的？

滚动条是由overflow-x引起的，去掉溢出就会去掉滚动条。

body {
  padding: 0;
  margin: 0;
}
.container {
  display: flex;
  flex-direction: column;
}
.header {
  padding: 12px;
  flex: 0 0 75px;
  background: yellow;
}
.content {
  flex: 1 1 auto;
  padding: 12px;
}
.dropdown {
  position: relative;
}
.menu {
  padding: 12px;
  position: absolute;
  background: white;
  top: 100%;
  left: 0;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

<div class="container">
  <div class="header">
    <div class="dropdown">
      <button>Dropdown</button>
      <div class="menu">
        <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
          <li>four</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi distinctio sit asperiores tenetur dolorum ratione cupiditate, ea, quia numquam, inventore aspernatur repudiandae, sapiente recusandae dolorem. Quidem rem molestias, fugit molestiae.
  </div>
</div>

【讨论】：