CSS: overflow-y: scroll; overflow-x: visible

Question

See the following post for a picture highlighting my question and a potential solution:

CSS overflow-y:visible, overflow-x:scroll

However, this strategy breaks when you actually move the scrollbar. In the suggested implementation (position: fixed;), the tooltips display next to child div in its position pre-scroll. So, as you scroll new child-divs into view, the tooltips begin falling off the bottom of the page.

See here for a demo of the bug: http://jsfiddle.net/narcV/4/

Any ideas how I can make the tooltips display next to the child div at all times?

This is not a bug: position: fixed always positions an element relative to the viewport, and not to its closest position: relative container. There's something odd about the question you link to as well: the title doesn't tally with the given code (it's also overflow-y: scroll; overflow-x: visible!), and I can't tell why the self-answer says to use position: fixed. — BoltClock
– BoltClock, Commented Apr 10, 2012 at 5:57
Yeah; I think that the title of that post is a typo. I'm not saying that position: fixed; is broken, but rather the solution in the referenced post is buggy (because, position: fixed; behaves exactly as you describe) — Chuck
– Chuck, Commented Apr 10, 2012 at 6:05

Community · Accepted Answer · 2017-05-23 11:54:10Z

1

I ended up implementing this using javascript, using the getPos function from this question.

The end product looks like:

var scrollPanel = ...;
var tooltip = ...;
function nodeHovered(e) {
   var hovered = e.srcElement;
   var pos = getPos(hovered);
   pos.x += hovered.offsetWidth;
   pos.y -= scrollPanel.scrollTop;
   tooltip.style.setProperty('left', pos.x);
   tooltip.style.setProperty('top', pos.y);
}

Basically, I calculate where on the page the node is currently displayed (taking into account the scrollbar position), and manually place the tooltip in the right spot on the page.

Too bad there's no elegant/CSS way to do this, but at least this works.

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Apr 11, 2012 at 18:19

Chuck

6663 gold badges8 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS: overflow-y: scroll; overflow-x: visible

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related