Avatar for Username

Pesquisar no site de suporte

Evite golpes de suporte. Nunca pedimos que você ligue ou envie uma mensagem de texto para um número de telefone, ou compartilhe informações pessoais. Denuncie atividades suspeitas usando a opção “Denunciar abuso”.

Saiba mais

Esta discussão foi arquivada. Faça uma nova pergunta se precisa de ajuda.

Scrollbars used in a:hover

  • 1 resposta
  • 3 têm este problema
  • 8 visualizações
  • Última resposta de Shadow110

m.pe
m.pe
more options

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

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

Todas as respostas (1)

Shadow110
Shadow110
more options

No ideas