绝对定位元素激活滚动

takeradi 发表于 Dev

Takeradi

我的标题中有一个下拉菜单（在此示例中始终处于打开状态）。当菜单打开时，它在打开时会激活标题滚动。如何在不激活垂直标题滚动条的情况下使菜单可见？请注意，我需要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下拉菜单：打开时，下拉菜单显示在标题上方，而标题没有滚动条。我希望这样的事情发生：

第三人

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

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

为此，我将引用@JamesKhoury对这个问题的回答：

如果您对overflow-x或overflow-y使用visible，而对others则不使用可见的东西。可见值被解释为自动。

您也可以检查分析此组合导致问题的原因。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-03-3

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

绝对定位元素激活滚动

绝对定位元素激活滚动

带有滚动容器的绝对定位元素

根据滚动位置沿路径绝对定位元素

绝对定位元素的宽度

了解绝对定位元素的默认位置

Bootstrap 4对绝对定位元素的响应

了解绝对定位元素的默认位置

绝对定位元素上的 Mouseenter 事件

身体上/左视口外的绝对定位元素的视图滚动条

绝对定位元素不在Safari iOS中的其他绝对定位元素之上

水平滚动绝对定位的元素？

在不使用绝对定位的情况下定位元素

在定位元素时使用边距还是绝对定位？

为什么绝对定位元素显示在静态元素上？

相对定位元素内的绝对定位元素。如何获得宽度和高度？

页面中具有绝对定位元素的angularjs

如何使用绝对位置来定位元素？

绝对定位元素的宽度百分比

角CDK拖动拖放绝对定位元素而不会跳转

如何定义绝对定位元素的锚点？

相对位置不包含绝对定位元素

根据里面的内容调整绝对定位元素的宽度

CSS - 在绝对定位元素后恢复正常的文档流

绝对定位元素上不需要的边距

绝对定位元素增加了巨大的空白

定位元素时考虑滚动条的宽度

在滚动条上动态定位元素

在滚动条上动态定位元素

将 CSS 滚动添加到定位元素

使用 jQuery 在滚动上重新定位元素