Ce site disposera de fonctionnalités limitées pendant que nous effectuons des opérations de maintenance en vue de vous proposer un meilleur service. Si un article ne règle pas votre problème et que vous souhaitez poser une question, notre communauté d’assistance est prête à vous répondre via @FirefoxSupport sur Twitter, et /r/firefox sur Reddit.

Avatar for Username

Rechercher dans l’assistance

Évitez les escroqueries à l’assistance. Nous ne vous demanderons jamais d’appeler ou d’envoyer un SMS à un numéro de téléphone ou de partager des informations personnelles. Veuillez signaler toute activité suspecte en utilisant l’option « Signaler un abus ».

En savoir plus

Ce sujet de discussion a été archivé. Veuillez poser une nouvelle question si vous avez besoin d’aide.

Scrollbars used in a:hover

  • 1 réponse
  • 3 ont ce problème
  • 8 vues
  • Dernière réponse par 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

Toutes les réponses (1)

Shadow110
Shadow110
more options

No ideas