Scrollbars used in a:hover
I have a container for a left-sided navigation panel. In this panel, I have a list of links. Some of these links are too long to fit with the width and we don't want to wrap the lines. So we came up with the following idea: Clip the long lines. However, when hovering over them, present a scrollbar to allow scrolling just the single line which is too long.
I came up with a CSS using something like this (where ".panel" sets the width of the navigation panel):
.panel a {
display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.panel a:hover {
overflow-x: auto; text-overflow: clip;
}
Now, this works in that when hovering over a too long link a scrollbar is presented right below the link. However, the functionality of this scrollbar is as follows:
(1) You can click on the left and right triangles to scroll the content of the link by character left or right, respectively. (2) You can click in the space between a triangle and the scrollbar handle to scroll the content of the link "page" wise.
but when you
(3) click and hold the scrollbar handle, the content is moved a few pixels and then the whole content is used for a drag-and-drop action. I.e., click and hold on the scrollbar handle is considered to be click and hold on the content itself.
This is on Firefox 57.0.2.
(Just for completeness: In IE 11 the behaviour is different: The scrollbar works as expected. When clicking and holding on the link itself, drag-and-drop action happens.)
I appreciate any ideas to solve this.
Peter
تمام جوابات (1)
No ideas