是否可以使用CSS在父级的y滚动条上显示子元素？ [英] Is it possible to display a child element over a parent's y-scrollbar using CSS?
问题描述
我有一个用< ul> 和< li> 元素建立的选择框。一些列表项比父框宽，所以我添加了一个：后伪元素覆盖它们与：hover
这一切都可以很好，除非< ul> 元素有一个垂直滚动条。
是否有某种方法可以在父级的垂直滚动条上显示子覆盖 p>
JSFiddle这里： http://jsfiddle.net/x9TZB/ 14 / （在Chrome中运行，但目前为我崩溃IE10 ...很奇怪。）
更新： >
我已经能够通过向DOM添加另一个< div> 元素来解决我的问题元素，< li> 元素，并设置一堆事件和计时器。还有一些粗糙的边缘;它不是完美的（特别是因为IE不支持 pointer-events：none ）。
如果任何人找到一个有效的解决方案 - 如果没有，那么也许作为一个默认的建议更新的HTML5标准布局规则： - ）
如果JSFiddle页面消失，则会在此处粘贴代码。尝试从< ul> 元素添加/删除滚动类以查看差异。
- CSS -
ul {
position：absolute;
display：block;
margin：0;
list-style-type：none;
border：1px solid #aaaaaa;
width：150px;
font：12px verdana，arial，sans-serif;
padding：0;
overflow-x：visible;
}
ul.scrolling {
overflow-y：scroll;
margin-right：-16px;
}
li {
position：relative;
margin：0;
padding：0 5px;
line-height：25px;
text-overflow：ellipsis;
-ms-text-overflow：ellipsis;
white-space：nowrap;
color：black;
cursor：pointer;
overflow：hidden;
}
ul.scrolling> li {
padding-right：6px;
}
li：hover {
background-color：＃c7e0ff;
overflow：visible;
}
li：hover：after {
content：attr（contents）;
position：absolute;
left：0;
top：0;
padding：0 5px;
z-index：999999;
background-color：＃c7e0ff;
}
- HTML -
< ul class =scrolling>
< li> ;, Lorem ipsum< / li>
< li> Dolor sit amet< / li>
< li> Consectetur adipisicing elit< / li>
< li> Sed do eiusmod tempor< / li>
< li> Incididunt ut ut labore et dolore< / li>
< li> Magna aliqua< / li>
< li>使用enim ad minim veniam< / li>
< li> Quis nostrud exercitation< / li>
< li> Ullamco laboris nisi ut< / li>
< li> Aliquip ex ea commodo consequat< / li>
< li> Duis aute irure dolor< / li>
< li>在reprehenderit< / li>
< li>在voluptate velit esse< / li>
< li> Cillum dolore eu fugiat nulla pariatur< / li>
< li> Excepteur sint occaecat< / li>
< li> Cupidatat non proident< / li>
< li>在职业中寻找< / li>
< li> Deserunt mollit anim id est laborum< / li>
< / ul>
- JavaScript（使用jQuery） -
//确保在DOM准备好后运行。
$（'li'）。each（function（）{
$（this）.attr（'contents'，$（this）.html（））;
}）;
我似乎实现了你的后果。看起来有点抖动，但也许这是一个很好的起点。
我将列表包含在div中，并且overflow-y设置为scroll。然后我将li的位置设置为悬浮的绝对值，增加z-index。改变z指数似乎导致抖动。
这在Chrome中有效。
看看 - http://jsfiddle.net/x9TZB/17/
css更改
li：hover {z-index：1; position：absolute;}
#listContainer {z-index：0; width：150px; height：200px; border：1px solid red ; overflow-y：scroll; overflow-x：visible;}
这没有包含div。只是删除div从上面的小提琴..也测试了它在IE9，似乎也工作正常。
I have a selection box built with <ul> and <li> elements. Some list items are wider than the parent box, so I added an :after pseudo-element to overlay them with the full content on :hover.
It all works great, except when the <ul> element has a vertical scrollbar. Then the overlay gets hidden and a horizontal scrollbar appears.
Is there some way to display the child overlay over the parent's vertical scrollbar?
JSFiddle here: http://jsfiddle.net/x9TZB/14/ (works in Chrome, but currently crashing IE10 for me... weird.)
UPDATE:
I've been able to solve my problem (mostly) by adding another <div> element to the DOM, positioning it over the <li> element, and setting up a bunch of events and timers. There are still some rough edges; it's not perfect by any means (especially since IE doesn't support pointer-events:none).
I'll leave this question open, in case anyone finds a working solution -- and if not, then perhaps as a tacit suggestion for an update to the HTML5 standard layout rules :-)
Code is pasted here in case the JSFiddle page ever disappears. Try adding/removing the "scrolling" class from the <ul> element to see the difference.
-- CSS --
ul {
position: absolute;
display: block;
margin: 0;
list-style-type: none;
border: 1px solid #aaaaaa;
width: 150px;
font: 12px verdana, arial, sans-serif;
padding: 0;
overflow-x: visible;
}
ul.scrolling {
overflow-y: scroll;
margin-right: -16px;
}
li {
position: relative;
margin: 0;
padding: 0 5px;
line-height: 25px;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
white-space: nowrap;
color: black;
cursor: pointer;
overflow: hidden;
}
ul.scrolling > li {
padding-right: 6px;
}
li:hover {
background-color: #c7e0ff;
overflow: visible;
}
li:hover:after {
content: attr(contents);
position: absolute;
left: 0;
top: 0;
padding: 0 5px;
z-index: 999999;
background-color: #c7e0ff;
}
-- HTML --
<ul class="scrolling">
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Consectetur adipisicing elit</li>
<li>Sed do eiusmod tempor</li>
<li>Incididunt ut labore et dolore</li>
<li>Magna aliqua</li>
<li>Ut enim ad minim veniam</li>
<li>Quis nostrud exercitation</li>
<li>Ullamco laboris nisi ut</li>
<li>Aliquip ex ea commodo consequat</li>
<li>Duis aute irure dolor</li>
<li>In reprehenderit</li>
<li>In voluptate velit esse</li>
<li>Cillum dolore eu fugiat nulla pariatur</li>
<li>Excepteur sint occaecat</li>
<li>Cupidatat non proident</li>
<li>Sunt in culpa qui officia</li>
<li>Deserunt mollit anim id est laborum</li>
</ul>
-- JavaScript (using jQuery) --
//Make sure this is run after the DOM is ready.
$('li').each(function () {
$(this).attr('contents', $(this).html());
});
I seem to achieved the affect you are after. It seems a little 'jittery' but perhaps this is a good starting point for you.
I contained the list within a div with the overflow-y set to scroll. I then set the position of the li to absolute on hover with an increased z-index. Changing the z-index seems to cause the 'jitteryness'. This worked in Chrome.
Have a look - http://jsfiddle.net/x9TZB/17/
css changes
li:hover{z-index:1;position:absolute;}
#listContainer{z-index:0;width:150px;height:200px;border:1px solid red;overflow-y:scroll;overflow-x:visible;}
UPDATE: This works without the containment div. Just remove the div from the above fiddle.. Also tested it in IE9 and seems to work OK too.
这篇关于是否可以使用CSS在父级的y滚动条上显示子元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
