在滚动条上方显示悬停的元素

Question

我正在尝试将侧边栏缩小到仅显示其宽度的 50 像素。

悬停时，我希望此特定链接展开以显示其内容。

您可以在下面的这个 sn-p 中看到它运行良好。

问题是我需要启用overflow-y:auto;，所以如果侧边栏太长，用户可以滚动它。

但是一旦将overflow-y:auto 添加到overflow-x:visible，overflow-x 就不再起作用了！

取消注释overflow-y 尝试一下，然后尝试将鼠标悬停在任何元素上。

我错过了什么？

#parent{
 background:#ddd;
 display:flex;
 flex-direction:row;
 height:100vh;
  max-height:100vh;
  overflow:hidden;
}
#content{
  z-index:1;/*to makesure sidebar is above content*/
 background:yellow;
 flex:1 1 0%;
}
#sidebar{
 z-index:2;/*to makesure sidebar is above it*/
 width:50px;
 /*If i uncomment this, the hover effect will no longer works */
  /*overflow-y:auto;*/
  overflow-x:visible;
}

a{
  height:50px;
  background:#ccc;
  width:50px;
  display:flex;
  flex-direction:col;
}
a > *{
 flex:1 1 0%;
}
a:hover{
  min-width:100px!important;
  width:100x;
  flex-direction:row;
}

<div id="parent">
  <div id="sidebar">
    <a> <i>1</i> <span class="title">Title</span> </a>
    <a> <i>2</i> <span class="title">Title</span> </a>
    <a> <i>3</i> <span class="title">Title</span> </a>
    
    <a> <i>4</i> <span class="title">Title</span> </a>
    <a> <i>5</i> <span class="title">Title</span> </a>
    <a> <i>6</i> <span class="title">Title</span> </a>
    
    <a> <i>7</i> <span class="title">Title</span> </a>
    <a> <i>8</i> <span class="title">Title</span> </a>
    <a> <i>9</i> <span class="title">Title</span> </a>
    
    <a> <i>10</i> <span class="title">Title</span> </a>
    <a> <i>11</i> <span class="title">Title</span> </a>
    <a> <i>12</i> <span class="title">Title</span> </a>
    
    <a> <i>13</i> <span class="title">Title</span> </a>
    <a> <i>14</i> <span class="title">Title</span> </a>
    <a> <i>15</i> <span class="title">Title</span> </a>
  </div>

  <div id="content">
    given lower z-index to makesure sibar is above     content
  </div>

</div>

Answer 1

你问的不是真的，溢出是一种接受或离开属性，滚动条是操作系统/浏览器 chrome 的一部分 - 你看到的任何花哨的东西都是用滚动条完成的这通常是通过 javascript 实现的。

除此之外，这是一个不使用 javascript 的可能可行的替代方案：

我所做的是使整个页面可滚动，为内容提供一个 div 子项 (#subcontent)，并为其提供position: fixed; 的属性，使其保持在顶部。

我还在#subcontent 中添加了overflow:auto; 和height:100%;，以便在内容溢出时它仍然可以滚动（我添加了一些填充文本来测试这一点）。现在，当您将鼠标悬停在侧边栏上时，它会滚动，而当您将鼠标悬停在内容上时，它会滚动。

唯一的问题是您可以看到 2 个滚动条，这可能看起来有点奇怪 - 当您到达内容的底部并继续滚动时，它会滚动侧边栏。但这是您必须在这里做出的牺牲，并且可能是您问题的唯一纯 css / html 解决方案。

请注意，已经存在的其他一些 css 属性现在可能是多余的，可以删除，但我不确定。

希望这会有所帮助！

#parent {
    background:yellow;
    display:flex;
    flex-direction:row;
}
#content {
    z-index:1; /*to make sure sidebar is above content*/
    flex:1 1 0%;
}
#subcontent {
    position:fixed;
    overflow:auto;
    height:100%;
}
#sidebar {
    background:#ddd;
    z-index:2; /*to make sure sidebar is above it*/
    width:50px;
    overflow:visible;
}
a {
    height:50px;
    background:#ccc;
    width:50px;
    display:flex;
    flex-direction:col;
}
a > * {
    flex:1 1 0%;
}
a:hover {
    min-width:100px!important;
    width:100x;
    flex-direction:row;
}

<div id="parent">
  <div id="sidebar">
    <a> <i>1</i> <span class="title">Title</span> </a>
    <a> <i>2</i> <span class="title">Title</span> </a>
    <a> <i>3</i> <span class="title">Title</span> </a>
    
    <a> <i>4</i> <span class="title">Title</span> </a>
    <a> <i>5</i> <span class="title">Title</span> </a>
    <a> <i>6</i> <span class="title">Title</span> </a>
    
    <a> <i>7</i> <span class="title">Title</span> </a>
    <a> <i>8</i> <span class="title">Title</span> </a>
    <a> <i>9</i> <span class="title">Title</span> </a>
    
    <a> <i>10</i> <span class="title">Title</span> </a>
    <a> <i>11</i> <span class="title">Title</span> </a>
    <a> <i>12</i> <span class="title">Title</span> </a>
    
    <a> <i>13</i> <span class="title">Title</span> </a>
    <a> <i>14</i> <span class="title">Title</span> </a>
    <a> <i>15</i> <span class="title">Title</span> </a>
  </div>

  <div id="content">
    <div id="subcontent">given lower z-index to make sure sidebar is above  content
<p>Lorem ipsum dolor sit amet, accusamus rationibus adversarium vix te, porro vocent in duo. Pro expetenda ullamcorper philosophia et, quodsi fuisset appellantur eu vix. Quo at assum mollis erroribus, sed id veri dicit. Eam prima blandit iudicabit at.
  </p>
  <p>
Ea vis meis impetus, moderatius dissentiunt cum at, eam ullum liber eruditi ne. Qui temporibus adversarium ex, te appetere constituam vix, te possim everti erroribus est. Mei tantas tibique ei, labore dolorum adversarium pro ex. Eius neglegentur et eam. Possit meliore mei an, has tale dico mediocritatem no. Purto singulis postulant vix cu.
  </p>
  <p>
Ei qui tibique repudiare mediocritatem, in vix diam velit delenit. Et recusabo suavitate dissentias duo, nam id noluisse repudiandae. At meis iisque eam, eos ex atomorum recteque consetetur. Esse nostro noluisse has ei, pro illum expetenda eu.
  </p>
  <p>
Vix ut disputando deterruisset, sea veritus hendrerit an. Ad has eius blandit adipisci, iuvaret eligendi omittantur ad quo. Eius dicta cu sea, et inciderint referrentur his. Modus equidem eum id, eum et dolorem incorrupte. Pri quas definitiones no, mei causae dignissim ex, pri epicurei inciderint an.
  </p>
  <p>
Te eos sale quas semper. Alia omittantur sed in, ea fuisset mnesarchum mei, omittam qualisque te quo. Pri ad tollit dissentiunt, malis theophrastus in pro. Natum bonorum in sed. Mei ad equidem admodum scripserit, in ius falli maiorum blandit.
  </p>
  <p>
Luptatum incorrupte te vel. Per tempor volumus comprehensam eu, pri iudico splendide in. Tation ornatus mea ea, quo ex inani repudiare. Qui ad malis sensibus, mel quot facer cu. Quidam vituperata duo no, cu vix reque maiestatis, libris principes sit ea. Duo no habemus explicari, ne quo tota conclusionemque, eu vel percipit reprehendunt.
  </p>
  <p>
Option pericula referrentur at vix, mea elitr mediocrem ei. At facete audiam habemus usu, detracto repudiare vix ne, ea commodo expetenda eos. Equidem referrentur ei eos, no sed audire appellantur. Nec ei dicam sapientem complectitur, est ex justo habemus inimicus. His ceteros delicata scriptorem id. Et saepe discere per, dolores laboramus prodesset sit an. Prima repudiare an his, vim tritani maluisset gloriatur te, cu eam suavitate constituam.
  </p>
  <p>
Usu id hinc nemore, ex ius invidunt perfecto, per eu animal admodum efficiantur. Ad tempor fuisset accommodare cum, cu pri oblique gubergren. Duo et omnium nusquam democritum. Et tritani mandamus sit. Iisque docendi corrumpit vel at, pri ei elit errem.
  </p>
  <p>
Ei qui quodsi iriure, sententiae reprimique his ei. Decore nullam et duo. Mutat scriptorem in vix, ei saperet platonem deseruisse nec. An hinc aperiam fuisset sed, vocibus vivendum ad usu. No eros feugait partiendo has. Ne modo mutat vis, id eam esse tractatos, quem pertinax consequuntur sit ut.
  </p>
  <p>
Ad facer elitr munere pri. Quo id aperiam vocibus, sint offendit ius id. Eu impetus convenire vim, nibh melius qui ad, omittam abhorreant id quo. In vix aliquip indoctum, eu facilisi postulant ius. Ea epicuri aliquando necessitatibus sed.
</p></div>
  </div>

</div>

Answer 2

感谢您的所有回答，我最终解决了这个问题，方法是在悬停时将侧边栏元素的内容定位为绝对，并用相对包装器将其包装以使其保持原位。

#parent{
 background:#ddd;
 display:flex;
 flex-direction:row;
 height:100vh;
  max-height:100vh;
  overflow:hidden;
  padding:0;
  margin:0
}
#content{
  z-index:1;/*to makesure sidebar is above content*/
 background:yellow;
 flex:1 1 0%;
}
#sidebar{
 z-index:2;/*to makesure sidebar is above it*/
 width:50px;
  /*overflow-x:visible; no longer needed !*/ 
  overflow-y:auto;
}

a{
  height:50px;
  background:#ccc;
  width:50px;
  display:flex;
  flex-direction:col;
}
a > *{
 flex:1 1 0%;
}
.wrap{
  position:relative;
  height:50px; /*prevent element from collapsing when its children is positioned absolute*/
}
a:hover{
  min-width:100px!important;
  width:100x;
  flex-direction:row;
  position:absolute;
}

<div id="parent">
  <div id="sidebar">
    <div class="wrap"><a> <i>1</i> <span class="title">Title</span> </a></div>
    <div class="wrap"><a> <i>2</i> <span class="title">Title</span> </a></div>
    <div class="wrap"><a> <i>3</i> <span class="title">Title</span> </a></div>
    
    <div class="wrap"><a> <i>4</i> <span class="title">Title</span> </a></div>
    <div class="wrap"><a> <i>5</i> <span class="title">Title</span> </a></div>
    <div class="wrap"><a> <i>6</i> <span class="title">Title</span> </a></div>
    
    <div class="wrap"><a> <i>7</i> <span class="title">Title</span> </a></div>
    <div class="wrap"><a> <i>8</i> <span class="title">Title</span> </a></div>
    <div class="wrap"><a> <i>9</i> <span class="title">Title</span> </a></div>
    
    <div class="wrap"><a> <i>10</i> <span class="title">Title</span> </a></div>
    <div class="wrap"><a> <i>11</i> <span class="title">Title</span> </a></div>
    <div class="wrap"><a> <i>12</i> <span class="title">Title</span> </a></div>
    
    <div class="wrap"><a> <i>13</i> <span class="title">Title</span> </a></div>
    <div class="wrap"><a> <i>14</i> <span class="title">Title</span> </a></div>
    <div class="wrap"><a> <i>15</i> <span class="title">Title</span> </a></div>
  </div>

  <div id="content">
    given lower z-index to makesure sibar is above     content
  </div>

</div>